View GitHub Repository craft-imageoptimize

Schedule Inspection
Subscribe

src/templates/frontend/lazysizes-fallback.twig.js   A
last analyzed

↳ Parent: Project

Complexity

Total Complexity 7
Complexity/F 3.5

Size

Lines of Code 31
Function Count 2

Duplication

Duplicated Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
wmc 7
eloc 21
c 0
b 0
f 0
dl 0
loc 31
rs 10
mnd 5
bc 5
fnc 2
bpm 2.5
cpm 3.5
noi 43
1 
// ref: https://web.dev/articles/browser-level-image-lazy-loading#how-do-i-handle-browsers-that-don't-yet-support-native-lazy-loading
2 
if ('loading' in HTMLImageElement.prototype) {
0 ignored issues
– show
Bug introduced by
The variable HTMLImageElement seems to be never declared. If this is a global, consider adding a /** global: HTMLImageElement */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
3 
// Replace the img.src with what is in the data-src property
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 0
Loading history...
4 
  const images = document.querySelectorAll('img[loading="lazy"]');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
5 
  images.forEach(img => {
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
Opening statement of multi-line function call not indented correctly; expected 0 spaces but found 2
Loading history...
Coding Style introduced by
The opening parenthesis of a multi-line function call should be the last content on the line.
Loading history...
6 
    if (img.dataset.src) {
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
7 
      img.src = img.dataset.src;
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
8 
      img.removeAttribute('data-src');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
9 
    }
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
10 
    if (img.dataset.srcset) {
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
11 
      img.srcset = img.dataset.srcset;
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
12 
      img.removeAttribute('data-srcset');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
13 
    }
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
14 
  });
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
For multi-line function calls, the closing parenthesis should be on a new line.

If a function call spawns multiple lines, the coding standard suggests to move the closing parenthesis to a new line:

someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
Loading history...
15 
// Replace the source.srcset with what is in the data-srcset property
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 0
Loading history...
16 
  const sources = document.querySelectorAll('source[data-srcset]')
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
17 
  sources.forEach(source => {
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
Opening statement of multi-line function call not indented correctly; expected 0 spaces but found 2
Loading history...
Coding Style introduced by
The opening parenthesis of a multi-line function call should be the last content on the line.
Loading history...
18 
    if (source.dataset.srcset) {
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
19 
      source.srcset = source.dataset.srcset;
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
20 
      source.removeAttribute('data-srcset');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
21 
    }
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
22 
    if (source.dataset.sizes) {
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
23 
      source.sizes = source.dataset.sizes;
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
24 
      source.removeAttribute('data-sizes');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 12 spaces, found 6
Loading history...
25 
    }
0 ignored issues
– show
Coding Style introduced by
This line of the multi-line function call does not seem to be indented correctly. Expected 6 spaces, but found 4.
Loading history...
Coding Style introduced by
Line indented incorrectly; expected 8 spaces, found 4
Loading history...
26 
  });
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
Coding Style introduced by
For multi-line function calls, the closing parenthesis should be on a new line.

If a function call spawns multiple lines, the coding standard suggests to move the closing parenthesis to a new line:

someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
Loading history...
27 
} else {
28 
  // Dynamically import the LazySizes library
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
29 
  const script = document.createElement('script');
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
30 
  script.src = '{{ scriptSrc }}';
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
31 
  document.body.appendChild(script);
0 ignored issues
– show
Coding Style introduced by
Line indented incorrectly; expected at least 4 spaces, found 2
Loading history...
32 
}
33