Prevent loading auto lightbox when disabled using data-amp-auto-lightbox-disable attribute (ampproject#37854)

deepaklalwani97 · AnuragVasanwala · web-flow · commit 4069d8bd3ef8 · 2022-04-14T15:27:50.000-04:00
* Prevent loading auto lightbox when disabled using attribute

* Fix failing test case

* ✨ Add `data-amp-auto-lightbox-disable` to `DISABLED_BY_ATTR`

Marking `data-amp-auto-lightbox-disable` as `&lt;html ⚡ lang="en" data-amp-auto-lightbox-disable&gt;` will disable `amp-auto-lightbox` from auto-load on page load.

* ♻️ Move `data-amp-auto-lightbox-disable` attribute checking from `body` to `html`

This will check if HTML Tag has `data-amp-auto-lightbox-disable` attribute like:
`&lt;html ⚡ lang="en" data-amp-auto-lightbox-disable&gt;`. If it has, it will disable auto-loading of `amp-auto-lightbox` on page load.

* 📖 Update markdown `auto-lightbox.md`

* ⏪ Revert unit-test changes to original

Co-authored-by: Anurag Vasanwala &lt;75766877+AnuragVasanwala@users.noreply.github.com&gt;
diff --git a/docs/spec/auto-lightbox.md b/docs/spec/auto-lightbox.md
@@ -53,14 +53,22 @@ To disable it on a particular document section:
 </section>
 ```
 
-Or to disable it for your entire document altogether:
+To disable it for your entire document altogether:
 
 ```html
 <body data-amp-auto-lightbox-disable>
   <!-- No elements in the document will be automatically lightboxed -->
 </body>
 ```
 
+Or to prevent automatically loading of `amp-auto-lightbox` script on page load:
+
+```html
+<html ⚡ lang="en" data-amp-auto-lightbox-disable>
+  <!-- Prevent automatically loading of `amp-auto-lightbox` script on page-load -->
+</html>
+```
+
 If you'd like manual tuning of disabled/enabled images and/or grouping, please use
 [`amp-lightbox-gallery`](https://amp.dev/documentation/components/amp-lightbox-gallery)
 directly.
diff --git a/src/auto-lightbox.js b/src/auto-lightbox.js
@@ -27,7 +27,13 @@ export const AutoLightboxEvents_Enum = {
 export function installAutoLightboxExtension(ampdoc) {
   const {win} = ampdoc;
   // Only enabled on single documents tagged as <html amp> or <html ⚡>.
-  if (!isAmphtml(win.document) || !ampdoc.isSingleDoc()) {
+  if (
+    !isAmphtml(win.document) ||
+    !ampdoc.isSingleDoc() ||
+    // Prevent loading auto lightbox when disabled using 'data-amp-auto-lightbox-disable' attribute (#37854)
+    // Check if HTML Tag has 'data-amp-auto-lightbox-disable' attribute
+    win.document.documentElement.hasAttribute('data-amp-auto-lightbox-disable')
+  ) {
     return;
   }
   chunk(
