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

Jump to bottom

add global variable to USWDS package for the polling to recognize the… #3867

Merged
merged 30 commits into from
Dec 12, 2020
Merged

add global variable to USWDS package for the polling to recognize the… #3867

merged 30 commits into from
Dec 12, 2020

Conversation

sarnikbixal
Copy link

@sarnikbixal sarnikbixal commented Dec 3, 2020 •
edited by thisisdano
Loading

This PR adds a small (under 1 KB minified) initialization script (uswds-init.min.js) to the package. When included in the <head> — either by reference or inline — this script prevents the banner from flashing its content on page load and shifting content (#3092).

Note: This only prevents flashing when you use CSS generated from USWDS 2.10.0 or later.

What it does

Simply:

  • It adds a .usa-js-loading class to the <html> element as the USWDS JS library is loading.

In more detail:

  • If JavaScript is present, it adds a .usa-js-loading class to the <html> element before the body renders.
  • If the USWDS JS library loads, it removes the .usa-js-loading class.
  • If the USWDS JS library does not load in a timeout period, it removes the .usa-js-loading class.

Since USWDS components are meant to make their content available even if our JS does not load, their visibility of any toggle-able content defaults to visible and the JS is responsible for hiding it. This resulted in a flash of "hidden" content between when the page renders and the JS loads.

This initialization script allows us to visually hide "hidden" content at page render by hooking those styles to the .usa-js-loading class. When the USWDS JS loads, the JavaScript is responsible for hiding/showing interactive content as usual and the class hook is removed. If the USWDS JS does not load, uswds-init removes the .usa-ls-loading class and the content will revert to visible. If there is no JS present at all, uswds-init will not load and the content will be visible at page render.

Using the initializer

  1. Copy uswds-init-min.js out of the USWDS package an into your project directory.
  2. Reference the script in the document <head> or include the entire script inline.

Include by reference

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>My Example Project</title>
       <script src="assets/uswds/js/uswds-init.min.js"></script>
       <link rel="stylesheet" href="assets/uswds/css/uswds.min.css" />
     </head>
     <body>
        ...
       <script src="assets/uswds/js/uswds.min.js"></script>
     </body>
   </html>

Include inline

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>My Example Project</title>
       <script>
         const docElem=window.document.documentElement,loadingClass="usa-js-loading";function addLoadingClass(){docElem.className+=` ${loadingClass}`}function revertClass(){docElem.className=docElem.className.replace(loadingClass,"")}if("querySelector"in window.document&&"addEventListener"in window){addLoadingClass();const e=setTimeout(revertClass,8e3);let s=100;const n=()=>{setTimeout(()=>{s+=1,"undefined"!=typeof uswdsPresent?(clearTimeout(e),setTimeout(revertClass,100)):s>0&&n()},100)};n()}
       </script>
       <link rel="stylesheet" href="assets/uswds/css/uswds.min.css" />
     </head>
     <body>
        ...
       <script src="assets/uswds/js/uswds.min.js"></script>
     </body>
   </html>

Other changes

  • Install snyk as a dependency for more reliable local tests
  • Minifies javascript in development environment
  • Builds USWDS on every npm start
  • Adds documentation

This initialization script is based on techniques found in https://www.filamentgroup.com/lab/enhancing-optimistically.html

thisisdano and others added 24 commits December 3, 2020 11:12
@thisisdano
Ignore no-unused-vars rule for the global variable
084c0c5
@thisisdano
Try a new const to indicate USWDS library presence
5eabc41
@thisisdano
Use a property accessor instead of a var to preserve the name
178abb6
I want to test this
1ca46ca
Another test
27d5e50
update the global variable to be on window object
0c16b2f
add the detecor script as well as update the build tool to accept mut…
af75c29 
…li entry points to create bableified version of the detector script
@thisisdano
Merge branch 'develop' into js-uswds-global-js-variable
0ad4989
@thisisdano
Merge branch 'js-uswds-global-js-variable' of https://github.com/uswd…
cd724a0 
…s/uswds into js-uswds-global-js-variable
@thisisdano
Add detector to preview head
42c0538
@thisisdano
Offscreen banner content while js is loading
fa0a160
@thisisdano
Rename uswds-detector → uswds-init
a208a9e 
Also, don't require `no-js`
@thisisdano
Add init script to page templates
33b1cc2
@thisisdano
Add right rule to assure content goes offscreen
dd34b2d
@thisisdano
Offscreen submenus while js is loading
33a70f6
@thisisdano
Run prettier
d0ad6dc
@thisisdano
Replace gulp-uglify with gulp-uglify-es
a3d81a5
@thisisdano
Use gulp-uglify-es; Only uglify and save in a production env
48ff882
@thisisdano
Update package-lock.json
9154a12
@thisisdano
Build before starting in start script
d75f20a
@thisisdano
Minify in every build, and use minified version in templates
32bf5e5
@thisisdano
Don't add a leading space if the class is the only class
d6cef93
@thisisdano
Add initializer to documentation
f60a3f2
@thisisdano
Fix script tag typo
761a3fc
@thisisdano thisisdano linked an issue Dec 11, 2020 that may be closed by this pull request
Banner open on page load is distracting #3092
Closed
2 tasks
@thisisdano thisisdano merged commit 39857a7 into develop Dec 12, 2020
@thisisdano thisisdano deleted the js-uswds-global-js-variable branch December 12, 2020 00:25
@mahoneycm mahoneycm mentioned this pull request Oct 18, 2022
Closed
2 tasks
@mvogelgesang mvogelgesang mentioned this pull request Mar 17, 2023
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thisisdano thisisdano thisisdano approved these changes

@mejiaj mejiaj Awaiting requested review from mejiaj

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Banner open on page load is distracting
2 participants
@sarnikbixal @thisisdano