Add cssImports static property to UnlitElement

googlefonts · Sep 4, 2023 · f48ec63 · f48ec63
1 parent 02f8a77
commit f48ec63
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 72 deletions.
diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js
@@ -22,6 +22,11 @@ export class SimpleElement extends HTMLElement {
     for (const style of this._additionalStyles) {
       this._appendStyle(style);
     }
+    if (this.constructor.cssImports) {
+      for (const link of this.constructor.cssImports) {
+        this._appendLink(link);
+      }
+    }
   }
 
   _appendStyle(cssText) {
@@ -30,6 +35,13 @@ export class SimpleElement extends HTMLElement {
     this.shadowRoot.appendChild(styleElement);
   }
 
+  _appendLink(href) {
+    const linkElement = document.createElement("link");
+    linkElement.setAttribute("rel", "stylesheet");
+    linkElement.setAttribute("href", href);
+    this.shadowRoot.appendChild(linkElement);
+  }
+
   appendStyle(cssText) {
     this._additionalStyles.push(cssText);
   }

diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css
@@ -0,0 +1,71 @@
+[data-title] {
+  position: relative;
+  cursor: default;
+}
+
+[data-title]:hover::before {
+  content: attr(data-title);
+  font-size: 10px;
+  text-align: center;
+  position: absolute;
+  display: block;
+  left: 200%;
+  bottom: calc(100% + 6px);
+  transform: translate(-50%);
+  background: #272727;
+  border-radius: 4px;
+  padding: 8px;
+  color: #ffffff;
+  z-index: 1;
+  opacity: 0;
+
+  /* disable when reduced-motion */
+  animation-name: disappear;
+  animation-delay: 1000ms;
+  animation-duration: 6s;
+}
+
+[data-title]:hover::after {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 50%;
+  width: 0;
+  height: 0;
+  bottom: calc(100% + 1px);
+  margin-left: -4px;
+  border: 1px solid black;
+  border-color: #272727 transparent transparent transparent;
+  border-width: 5px 3px 0;
+  z-index: 1;
+  opacity: 0;
+
+  /* disable when reduced-motion */
+  animation-name: disappear;
+  animation-delay: 1000ms;
+  animation-duration: 6s;
+}
+
+/* disable when reduced-motion */
+@keyframes disappear {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  [data-title]:hover::before {
+    opacity: 1;
+    animation: none;
+  }
+  [data-title]:hover::after {
+    opacity: 1;
+    animation: none;
+  }
+}
diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js
@@ -27,78 +27,6 @@ export class IconButton extends UnlitElement {
       opacity: 35%;
       transform: none;
     }
-
-    [data-title] {
-      position: relative;
-      cursor: default;
-    }
-
-    [data-title]:hover::before {
-      content: attr(data-title);
-      font-size: 10px;
-      text-align: center;
-      position: absolute;
-      display: block;
-      left: 200%;
-      bottom: calc(100% + 6px);
-      transform: translate(-50%);
-      background: #272727;
-      border-radius: 4px;
-      padding: 8px;
-      color: #ffffff;
-      z-index: 1;
-      opacity: 0;
-
-      /* disable when reduced-motion */
-      animation-name: disappear;
-      animation-delay: 1000ms;
-      animation-duration: 6s;
-    }
-
-    [data-title]:hover::after {
-      content: "";
-      position: absolute;
-      display: block;
-      left: 50%;
-      width: 0;
-      height: 0;
-      bottom: calc(100% + 1px);
-      margin-left: -4px;
-      border: 1px solid black;
-      border-color: #272727 transparent transparent transparent;
-      border-width: 5px 3px 0;
-      z-index: 1;
-      opacity: 0;
-
-      /* disable when reduced-motion */
-      animation-name: disappear;
-      animation-delay: 1000ms;
-      animation-duration: 6s;
-    }
-
-    /* disable when reduced-motion */
-    @keyframes disappear {
-      0% {
-        opacity: 1;
-      }
-      95% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion) {
-      [data-title]:hover::before {
-        opacity: 1;
-        animation: none;
-      }
-      [data-title]:hover::after {
-        opacity: 1;
-        animation: none;
-      }
-    }
   `;
 
   constructor(src) {
@@ -108,6 +36,8 @@ export class IconButton extends UnlitElement {
     }
   }
 
+  static cssImports = ["/css/tooltip.css"];
+
   static properties = {
     src: { type: String },
     title: { type: String },