From 8bc9b66e96285496fdb129ca1fa07759ddd4fd42 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Wed, 21 Dec 2022 18:13:00 +0100 Subject: [PATCH 1/4] fix(Build): Load modernizr early and non-asynchronously. Include the modernizr bundle by injecting a script tag. This ensures modernizr is loaded synchronously and executing early and sets it's feature detection classes before the layout is done by the browser. This reverts the breaking change from the previous Patternslib 9.8.0-beta.2 release. The separate modernizr.min.js build file is still kept, but modernizr is included by the main Patternslib bundle. There is no need to add another script tag to include modernizr. You can disable loading of modernizr by setting the following before the Patternslib bundle.min.js is included: Also, the "js" class is set on the HTML root tag when a "no-js" class was present regardless of the "__patternslib_disable_modernizr" setting. Since Patternslib 9.0.0-alpha.0 where we introduced webpack module federation for our bundles, Modernizr is loaded asynchronously and applying it's CSS classes a tick too late. For example, the change from the "no-js" to the "js" class was done while the tiles have already been drawn and visible on the screen, resulting in screen flickering. There are a number of projects which depend on Modernizr being applied early. --- index.html | 1 - src/core/feature-detection.js | 32 ++++++++++++++++ src/core/feature-detection.md | 71 +++++++++++++++++++++++++++++++++++ src/index.js | 4 ++ src/pat/clone-code/index.html | 1 + 5 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 src/core/feature-detection.js create mode 100644 src/core/feature-detection.md diff --git a/index.html b/index.html index 954ad7cc6..12fe5f6a7 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,6 @@ Patterns demo pages - diff --git a/src/core/feature-detection.js b/src/core/feature-detection.js new file mode 100644 index 000000000..664c316dd --- /dev/null +++ b/src/core/feature-detection.js @@ -0,0 +1,32 @@ +(function () { + // Add JavaScript feature as class to the element, just like + // Modernizr does. This is needed for accessibility reasons, to support + // browsers and situations where JavaScript is not available or disabled. + // The HTML root tag needs to have the `no-js` class set which is then + // replaced by `js`. + const html = document.getElementsByTagName("html")[0]; + if (html.classList.contains("no-js")) { + html.classList.remove("no-js"); + html.classList.add("js"); + } + + // Do not load modernizr if disabled. It's enabled by default. + // You might want to disable it for your project by setting: + // window.__patternslib_disable_modernizr = true; + if (window.__patternslib_disable_modernizr) { + return; + } + + // Get the current script tag's URL. + // See: https://stackoverflow.com/a/984656/1337474 + const scripts = document.getElementsByTagName("script"); + const script = scripts[scripts.length - 1]; + let script_url = script.src; + // Get the base URL of the current script tag's URL. + script_url = script_url.substring(0, script_url.lastIndexOf("/")) + "/"; + + // Inject a new one with the modernizr bundle. + const script_tag = document.createElement("script"); + script_tag.src = script_url + "modernizr.min.js"; + document.getElementsByTagName("head")[0].appendChild(script_tag); +})(); diff --git a/src/core/feature-detection.md b/src/core/feature-detection.md new file mode 100644 index 000000000..f04513b44 --- /dev/null +++ b/src/core/feature-detection.md @@ -0,0 +1,71 @@ +# Feature detection + +This module adds the `js` class to the HTML root node and loads Modernizr for more feature detection. + +--- +** Note ** + +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. + +--- + + +## Adding the "js" class for accessibility styles + +There are situations where web browsers do not have JavaScript available or when it is disabled. +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. + +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). +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). + +Therefore Patternslib adds a `js` class to the HTML root node, if the HTML root node already has a `no-js` class. +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. + +Markup: + +``` + + + + + + + +``` + +When the JavaScript is loaded, the `no-js` class is removed and the `js` class is set: + +``` + + + + + + + +``` + + +## Loading Modernizr + +Modernizr is loaded for more feature detection. + +To disable Modernizr you can set `window.__patternslib_disable_modernizr = true;` just before you load the Patternslib bundle: + +``` + + + + + + + + +``` + +--- +** Note ** + +The Modernizr feature detection is being phased out and might be removed in a future version of Patternslib. + +--- diff --git a/src/index.js b/src/index.js index f4ef68cef..e5a869930 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,9 @@ +// Load modernizr and the `html.js` feature class. +import "./core/feature-detection"; + // Webpack entry point for module federation. import "@patternslib/dev/webpack/module_federation"; + // The next import needs to be kept with parentheses, otherwise we get this error: // "Shared module is not available for eager consumption." import("./patterns"); diff --git a/src/pat/clone-code/index.html b/src/pat/clone-code/index.html index 0740f109b..641cb6614 100644 --- a/src/pat/clone-code/index.html +++ b/src/pat/clone-code/index.html @@ -4,6 +4,7 @@ pat-clone demo page + From 4ccf1bd23fa3983844836973a6febd3549836106 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 22 Dec 2022 12:51:06 +0100 Subject: [PATCH 2/4] maint(Docs): Update some documentation. --- docs/designer/what-is-patternslib.md | 7 ++++--- docs/general/what-is-patternslib.md | 11 ----------- 2 files changed, 4 insertions(+), 14 deletions(-) delete mode 100644 docs/general/what-is-patternslib.md diff --git a/docs/designer/what-is-patternslib.md b/docs/designer/what-is-patternslib.md index bada92a62..95308bd2f 100644 --- a/docs/designer/what-is-patternslib.md +++ b/docs/designer/what-is-patternslib.md @@ -1,7 +1,8 @@ # What is Patternslib? -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. +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. Instead of writing or integrating Javascript, you simply add special CSS classes and HTML5 data attributes to your HTML. -These classes and `data-` attributes describe the so-called "interaction patterns" of Patternslib. +These classes and `data-` attributes describe and invoke the so-called "interaction patterns" of Patternslib which add rich functionality to your page. + +Patternslib is both a library of reusable interaction patterns as well as a small framework for creating such patterns. diff --git a/docs/general/what-is-patternslib.md b/docs/general/what-is-patternslib.md deleted file mode 100644 index e017a635c..000000000 --- a/docs/general/what-is-patternslib.md +++ /dev/null @@ -1,11 +0,0 @@ -# What is Patternslib? - -Patternslib is a toolkit which lets you create rich, dynamic and interactive prototypes or -websites, without having to know or care about Javascript. - -Instead, you simply add special CSS classes and HTML5 data attributes to your -HTML. These clasess and attributes describe and invoke so-called "interaction patterns", -which add rich functionality to your page. - -Patternslib is both a library of reusable interaction patterns as well as a -small framework for creating such patterns. From 8e05515fbca24f0a16536f20263b09b4506d7f2c Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 22 Dec 2022 13:26:47 +0100 Subject: [PATCH 3/4] maint(Build): Remove now unused globals module. jQuery is now imported and set earlier. --- src/globals.js | 4 ---- src/patterns.js | 1 - 2 files changed, 5 deletions(-) delete mode 100644 src/globals.js diff --git a/src/globals.js b/src/globals.js deleted file mode 100644 index c6e6ecaa2..000000000 --- a/src/globals.js +++ /dev/null @@ -1,4 +0,0 @@ -import jquery from "jquery"; -// Register jQuery globally -window.jQuery = jquery; -window.$ = jquery; diff --git a/src/patterns.js b/src/patterns.js index 3d35f7ee4..61b563fa6 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -3,7 +3,6 @@ */ // Import base -import "./globals"; import registry from "./core/registry"; // Import all used patterns for the bundle to be generated From 971201918da325644a8fa04d1c1886424055913e Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 22 Dec 2022 13:27:13 +0100 Subject: [PATCH 4/4] maint(Build): Do not include the example minimalpattern in the build. --- src/patterns.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/patterns.js b/src/patterns.js index 61b563fa6..3553f9df9 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -58,9 +58,6 @@ import "./pat/tooltip/tooltip"; import "./pat/validation/validation"; import "./pat/zoom/zoom"; -// example pattern -import "./pat/minimalpattern/minimalpattern"; - // External patterns import "@patternslib/pat-content-mirror"; import "@patternslib/pat-doclock";