Skip to content

Commit 7197d37

Browse files
authored
Merge pull request #1119 from Patternslib/modernizr-load
fix(Build): Load modernizr early and non-asynchronously.
2 parents 836c912 + 9712019 commit 7197d37

File tree

9 files changed

+112
-23
lines changed

9 files changed

+112
-23
lines changed

docs/designer/what-is-patternslib.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# What is Patternslib?
22

3-
Patternslib is a library of reusable patterns which let you create rich,
4-
dynamic and interactive prototypes or websites, without having to know or care about Javascript.
3+
Patternslib is a library of reusable patterns which let you create rich, dynamic and interactive prototypes or websites, without having to know or care about Javascript.
54

65
Instead of writing or integrating Javascript, you simply add special CSS classes and HTML5 data attributes to your HTML.
7-
These classes and `data-` attributes describe the so-called "interaction patterns" of Patternslib.
6+
These classes and `data-` attributes describe and invoke the so-called "interaction patterns" of Patternslib which add rich functionality to your page.
7+
8+
Patternslib is both a library of reusable interaction patterns as well as a small framework for creating such patterns.

docs/general/what-is-patternslib.md

Lines changed: 0 additions & 11 deletions
This file was deleted.

index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<title>Patterns demo pages</title>
55
<meta charset="utf-8">
66
<link rel="stylesheet" href="/style/common.css" />
7-
<script src="/modernizr.min.js"></script>
87
<script src="/bundle.min.js"></script>
98
</head>
109
<body class="component-index">

src/core/feature-detection.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
(function () {
2+
// Add JavaScript feature as class to the <html> element, just like
3+
// Modernizr does. This is needed for accessibility reasons, to support
4+
// browsers and situations where JavaScript is not available or disabled.
5+
// The HTML root tag needs to have the `no-js` class set which is then
6+
// replaced by `js`.
7+
const html = document.getElementsByTagName("html")[0];
8+
if (html.classList.contains("no-js")) {
9+
html.classList.remove("no-js");
10+
html.classList.add("js");
11+
}
12+
13+
// Do not load modernizr if disabled. It's enabled by default.
14+
// You might want to disable it for your project by setting:
15+
// window.__patternslib_disable_modernizr = true;
16+
if (window.__patternslib_disable_modernizr) {
17+
return;
18+
}
19+
20+
// Get the current script tag's URL.
21+
// See: https://stackoverflow.com/a/984656/1337474
22+
const scripts = document.getElementsByTagName("script");
23+
const script = scripts[scripts.length - 1];
24+
let script_url = script.src;
25+
// Get the base URL of the current script tag's URL.
26+
script_url = script_url.substring(0, script_url.lastIndexOf("/")) + "/";
27+
28+
// Inject a new one with the modernizr bundle.
29+
const script_tag = document.createElement("script");
30+
script_tag.src = script_url + "modernizr.min.js";
31+
document.getElementsByTagName("head")[0].appendChild(script_tag);
32+
})();

src/core/feature-detection.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Feature detection
2+
3+
This module adds the `js` class to the HTML root node and loads Modernizr for more feature detection.
4+
5+
---
6+
** Note **
7+
8+
If you create own bundles based on Patternslib, you would need to import the `src/core/feature-detection` module for these features to be available.
9+
10+
---
11+
12+
13+
## Adding the "js" class for accessibility styles
14+
15+
There are situations where web browsers do not have JavaScript available or when it is disabled.
16+
In situations where no JavaScript is available you might want to show certain elements where in JavaScript situations you might want to hide them until a JavaScript functionality is showing them.
17+
18+
In the Media Query Level 5 specification there is a CSS media feature to detect JavaScript via a [`scripting` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting).
19+
But at time of this writing this is [not available in any of the major browsers](https://caniuse.com/mdn-css_at-rules_media_scripting).
20+
21+
Therefore Patternslib adds a `js` class to the HTML root node, if the HTML root node already has a `no-js` class.
22+
The `js` class is set very early before any browser layout is done if you include the Patternslib script in the HEAD of your site.
23+
24+
Markup:
25+
26+
```
27+
<html class="no-js">
28+
<head>
29+
<script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
30+
</head>
31+
<body>
32+
</body>
33+
</html>
34+
```
35+
36+
When the JavaScript is loaded, the `no-js` class is removed and the `js` class is set:
37+
38+
```
39+
<html class="js">
40+
<head>
41+
<script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
42+
</head>
43+
<body>
44+
</body>
45+
</html>
46+
```
47+
48+
49+
## Loading Modernizr
50+
51+
Modernizr is loaded for more feature detection.
52+
53+
To disable Modernizr you can set `window.__patternslib_disable_modernizr = true;` just before you load the Patternslib bundle:
54+
55+
```
56+
<html class="no-js">
57+
<head>
58+
<script>window.__patternslib_disable_modernizr = true;</script>
59+
<script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
60+
</head>
61+
<body>
62+
</body>
63+
</html>
64+
```
65+
66+
---
67+
** Note **
68+
69+
The Modernizr feature detection is being phased out and might be removed in a future version of Patternslib.
70+
71+
---

src/globals.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
// Load modernizr and the `html.js` feature class.
2+
import "./core/feature-detection";
3+
14
// Webpack entry point for module federation.
25
import "@patternslib/dev/webpack/module_federation";
6+
37
// The next import needs to be kept with parentheses, otherwise we get this error:
48
// "Shared module is not available for eager consumption."
59
import("./patterns");

src/pat/clone-code/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<title>pat-clone demo page</title>
55
<meta charset="utf-8">
66
<link rel="stylesheet" href="/style/common.css" />
7+
<script>window.__patternslib_disable_modernizr = true;</script>
78
<script src="/bundle.min.js"></script>
89
</head>
910
<body>

src/patterns.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*/
44

55
// Import base
6-
import "./globals";
76
import registry from "./core/registry";
87

98
// Import all used patterns for the bundle to be generated
@@ -59,9 +58,6 @@ import "./pat/tooltip/tooltip";
5958
import "./pat/validation/validation";
6059
import "./pat/zoom/zoom";
6160

62-
// example pattern
63-
import "./pat/minimalpattern/minimalpattern";
64-
6561
// External patterns
6662
import "@patternslib/pat-content-mirror";
6763
import "@patternslib/pat-doclock";

0 commit comments

Comments
 (0)