Add popover detection script and no-popover html class

cdlib · Nov 21, 2024 · 131a003 · 131a003
1 parent ff50779
commit 131a003
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/elements/_template-default.hbs b/elements/_template-default.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-popover">
 <head>
   <meta charset="utf-8">
   <title>CDLIB UI</title>

diff --git a/elements/_template-page.hbs b/elements/_template-page.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-popover">
 <head>
   <meta charset="utf-8">
   <title>CDLIB UI</title>

diff --git a/js/main.js b/js/main.js
@@ -2,6 +2,7 @@ import './anchor-positioning.js'
 import './headernav.js'
 import './mediaqueries.js'
 import './newsreel.js'
+import './popover-support.js'
 import './sidebarposts.js'
 import './slideshow.js'
 import './toggles.js'
diff --git a/js/popover-support.js b/js/popover-support.js
@@ -0,0 +1,7 @@
+// ***** Popover Support for CSS ***** //
+
+// If the popover element is detected in the browser, remove the no-popover class from the html tag.
+
+if (window.HTMLElement.prototype.hasOwnProperty('popover')) { // eslint-disable-line no-prototype-builtins
+  document.querySelector('html').classList.remove('no-popover')
+}