continue switching to light dom components

Codepoints · May 5, 2024 · 860e974 · 860e974
1 parent 06f7a7e
commit 860e974
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 148 deletions.
diff --git a/src/css/_components.css b/src/css/_components.css
@@ -1,3 +1,23 @@
+@keyframes cp-success {
+  from {
+    margin-top: -2em;
+    opacity: 1;
+  }
+  to {
+    margin-top: -4em;
+    opacity: 0;
+  }
+}
+
+@keyframes cp-question {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 cp-menu {
   a {
     color: var(--color-link);
@@ -67,3 +87,116 @@ cp-menu {
     }
   }
 }
+
+cp-success {
+  pointer-events: none;
+  display: block;
+  padding: .2em .8em;
+  position: absolute;
+  line-height: 1.6;
+  z-index: 2;
+  background: #000c;
+  border-radius: .2em;
+  box-shadow: 1px 1px 2px rgba(0,0,0,.4);
+  color: white;
+  text-shadow: 1px  1px 0 #000,
+               1px -1px 0 #000,
+              -1px  1px 0 #000,
+              -1px -1px 0 #000;
+  animation-name: cp-success;
+}
+
+cp-language label > * {
+  vertical-align: middle;
+}
+
+cp-share-container {
+  .preview {
+    padding: 1rem;
+    border-bottom: 1px solid;
+  }
+  .preview span {
+    display: block;
+  }
+  .preview .title {
+    font-size: 1.25rem;
+  }
+  ul {
+    padding-left: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}
+
+cp-searchform {
+  display: block;
+}
+
+cp-question {
+  display: block;
+  animation-name: cp-question;
+  animation-duration: .3s;
+  animation-iteration-count: 1;
+  animation-timing-function: cubic-bezier(0.455, 0.030, 0.015, 0.955);
+}
+
+cp-wizard {
+  display: block;
+}
+cp-wizard[hidden] {
+  display: none;
+}
+
+cp-representations {
+  & > button {
+    display: block;
+    margin-top: .5rem;
+  }
+  @media print {
+    & button {
+      display: none;
+    }
+  }
+  & > button,
+  .props {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  th, td {
+    padding: .2rem .5rem;
+    vertical-align: top;
+  }
+  th:first-child {
+    text-align: right;
+  }
+  th:last-child {
+    text-align: left;
+  }
+  td {
+    font-family: var(--font-family-monospace);
+  }
+  small {
+    font-weight: normal;
+    font-size: calc(1rem / var(--font-mod));
+  }
+  table:not(.show-all) tbody tr:not(.primary),
+  table:not(.show-all) tfoot {
+    display: none;
+  }
+  .props button {
+    opacity: .5;
+    margin-left: .25rem;
+    border: none;
+    border-radius: 50%;
+  }
+  .props button:focus,
+  .props button:hover {
+    opacity: 1;
+  }
+  tbody small {
+    display: block;
+    margin-right: calc(1.6em * var(--font-mod));
+  }
+}
diff --git a/src/css/_root.css b/src/css/_root.css
@@ -2,6 +2,7 @@
   --font-mod: 1.25;
   --font-family: Literata, Noto Serif, Droid Serif, Georgia, Times New Roman, Times, serif;
   --font-family-alternate: Noto Sans, Droid Sans, Verdana, sans-serif;
+  --font-family-monospace: monospace;
 
   --color-danger: #901;
   --color-danger-muted: #eadadc;

diff --git a/src/js/components/cp-btn-share.ts b/src/js/components/cp-btn-share.ts
@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit';
+import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {gettext as _} from '../_i18n.ts';
 import {CpDialog} from './cp-dialog.ts';
@@ -80,25 +80,9 @@ export class CpBtnShare extends LitElement {
 
 @customElement('cp-share-container')
 class CpShareContainer extends LitElement {
-  static styles = css`
-    .preview {
-      padding: 1rem;
-      border-bottom: 1px solid;
-    }
-    .preview span {
-      display: block;
-    }
-    .preview .title {
-      font-size: 1.25rem;
-    }
-    ul {
-      padding-left: 0;
-      list-style: none;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-    }
-  `;
+  createRenderRoot() {
+    return this;
+  }
 
   render() {
     const s = [];
@@ -107,7 +91,6 @@ class CpShareContainer extends LitElement {
       s.push(html`<li><a class="btn" href="${url}" target="_blank">${service}</a></li>`);
     }
     return html`
-    <link rel="stylesheet" href="${document.getElementById('main-css').href}">
     <div class="preview">
       <span class="url">${this.url}</span>
       <span class="title">${this.title}</span>

diff --git a/src/js/components/cp-language.ts b/src/js/components/cp-language.ts
@@ -1,15 +1,9 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { gettext as _ } from '../_i18n.ts';
 
 @customElement('cp-language')
 export class CpLanguage extends LitElement {
-  static styles = css`
-    label > * {
-      vertical-align: middle;
-    }
-  `;
-
   @property()
   declare currentLanguage : string;
 
@@ -26,9 +20,12 @@ export class CpLanguage extends LitElement {
     }));
   }
 
+  createRenderRoot() {
+    return this;
+  }
+
   render() {
     return html`
-    <link rel="stylesheet" href="${document.getElementById('main-css').href}">
     <label>
       <cp-icon icon="language-icon" width="24px" height="24px"></cp-icon>&nbsp;
       ${_('choose language:')}

diff --git a/src/js/components/cp-representations.ts b/src/js/components/cp-representations.ts
@@ -1,4 +1,4 @@
-import {LitElement, html, css, nothing} from 'lit';
+import {LitElement, html, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {gettext as _} from '../_i18n.ts';
@@ -122,54 +122,6 @@ class FavoritesManager {
 
 @customElement('cp-representations')
 export class CpRepresentations extends LitElement {
-  static styles = css`
-:host > button {
-  display: block;
-  margin-top: .5rem;
-}
-@media print {
-  :host button {
-    display: none;
-  }
-}
-:host > button,
-.props {
-  margin-left: auto;
-  margin-right: auto;
-}
-th, td {
-  padding: .2rem .5rem;
-  vertical-align: top;
-}
-th:first-child {
-  text-align: right;
-}
-th:last-child {
-  text-align: left;
-}
-small {
-  font-weight: normal;
-  font-size: calc(1rem / var(--font-mod));
-}
-table:not(.show-all) tbody tr:not(.primary),
-table:not(.show-all) tfoot {
-  display: none;
-}
-.props button {
-  opacity: .5;
-  margin-left: .25rem;
-  border: none;
-  border-radius: 50%;
-}
-.props button:focus,
-.props button:hover {
-  opacity: 1;
-}
-tbody small {
-  display: block;
-  margin-right: calc(1.6em * var(--font-mod));
-}
-  `;
 
   @property({ type: Number })
   declare cp = null;
@@ -219,6 +171,11 @@ tbody small {
         description: formatter[3] ?? null,
       });
     });
+    this.innerHTML = '';
+  }
+
+  createRenderRoot() {
+    return this;
   }
 
   render() {

diff --git a/src/js/components/cp-searchform.ts b/src/js/components/cp-searchform.ts
@@ -1,16 +1,15 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('cp-searchform')
 export class CpSearchform extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
+  constructor() {
+    super();
+    this.addEventListener('reset', this.reset.bind(this));
+  }
 
-  render() {
-    return html`<slot @reset="${this.reset}"></slot>`;
+  createRenderRoot() {
+    return this;
   }
 
   reset() {

diff --git a/src/js/components/cp-success.ts b/src/js/components/cp-success.ts
@@ -1,43 +1,13 @@
-import {LitElement, css, html} from 'lit';
+import {LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
 @customElement('cp-success')
 export class CpSuccess extends LitElement {
-  static styles = css`
-    :host {
-      pointer-events: none;
-      display: block;
-      padding: .2em .8em;
-      position: absolute;
-      line-height: 1.6;
-      z-index: 2;
-      background: #000c;
-      border-radius: .2em;
-      box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-      color: white;
-      text-shadow: 1px  1px 0 #000,
-                   1px -1px 0 #000,
-                  -1px  1px 0 #000,
-                  -1px -1px 0 #000;
-      animation-name: cp-success;
-    }
-    @keyframes cp-success {
-      from {
-        margin-top: -2em;
-        opacity: 1;
-      }
-      to {
-        margin-top: -4em;
-        opacity: 0;
-      }
-    }
-  `;
-
   @property()
   declare duration: int;
 
-  render() {
-    return html`<slot></slot>`;
+  createRenderRoot() {
+    return this;
   }
 
   connectedCallback() {