make test custom element page
Signed-off-by: Xe <me@christine.website>
This commit is contained in:
parent
1986de12d1
commit
166079f0e3
|
|
@ -42,3 +42,11 @@ img {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
xeblog-conv:not(:defined) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
xeblog-conv:defined {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { g, h, x } from "./xeact.min.js";
|
||||||
|
import { div, span } from "./xeact-html.min.js";
|
||||||
|
|
||||||
|
const mkConversation = (who, mood, message) =>
|
||||||
|
h("div", {className: "conversation gruvbox-dark"}, [
|
||||||
|
h("div", {className: "conversation-picture conversation-smol"}, [
|
||||||
|
h("picture", {}, [
|
||||||
|
h("source", {type: "image/avif", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.avif`}),
|
||||||
|
h("source", {type: "image/webp", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.webp`}),
|
||||||
|
h("img", {alt: `${who} is ${mood}`, src: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.png`})
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
h("div", {className: "conversation-chat"}, [
|
||||||
|
h("span", {innerText: "<"}),
|
||||||
|
h("b", {innerText: who}),
|
||||||
|
h("span", {innerText: "> "}),
|
||||||
|
span({}, Array.from(message))
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
|
||||||
|
export class Conversation extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
let root = this.attachShadow({mode: "open"});
|
||||||
|
let who = this.getAttribute("name");
|
||||||
|
let mood = this.getAttribute("mood");
|
||||||
|
|
||||||
|
root.appendChild(h("link", {rel: "stylesheet", href: "/css/gruvbox-dark.css"}));
|
||||||
|
root.appendChild(h("link", {rel: "stylesheet", href: "/css/shim.css"}));
|
||||||
|
root.appendChild(h("style", {textContent: `img { width: 67%; }`}));
|
||||||
|
root.appendChild(mkConversation(who, mood, this.childNodes));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define("xeblog-conv", Conversation);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
import{h,t}from"./xeact.min.js";const $tl=d=>(l,$={},s=[])=>(s.unshift(t(l)),h(d,$,s)),h1=$tl("h1"),h2=$tl("h2"),h3=$tl("h3"),h4=$tl("h4"),h5=$tl("h5"),h6=$tl("h6"),p=$tl("p"),b=$tl("b"),i=$tl("i"),u=$tl("u"),dd=$tl("dd"),dt=$tl("dt"),del=$tl("del"),sub=$tl("sub"),sup=$tl("sup"),strong=$tl("strong"),small=$tl("small"),hl=()=>h("hl"),br=()=>h("br"),img=(l,t="")=>h("img",{src:l,alt:t}),ahref=(l,$)=>h("a",{href:l},t($)),$dl=$=>(l={},t=[])=>h($,l,t),span=$dl("span"),div=$dl("div"),ul=$dl("ul"),iframe=(l,t={})=>(t.src=l,h("iframe",t));export{h1,h2,h3,h4,h5,h6,p,b,i,u,dd,dt,del,sub,sup,strong,small,hl,br,img,ahref,span,div,ul,iframe};
|
||||||
|
|
@ -1 +1 @@
|
||||||
const h=(e,t={},r=[])=>{let n=Object.assign(document.createElement(e),t);return n.append(...r),n},x=e=>{for(;e.lastChild;)e.removeChild(e.lastChild)},g=e=>document.getElementById(e),c=e=>document.getElementsByClassName(e),s=e=>Array.from(document.querySelectorAll(e)),u=(e="",t={})=>{let r=new URL(e,window.location.href);return Object.entries(t).forEach(e=>{var[t,e]=e;r.searchParams.set(t,e)}),r.toString()},r=e=>window.addEventListener("DOMContentLoaded",e);export{h,x,g,c,u,s,r};
|
const h=(e,t={},r=[])=>{let n=Object.assign(document.createElement(e),t);return Array.isArray(r)||(r=[r]),n.append(...r),n},t=e=>document.createTextNode(e),x=e=>{for(;e.lastChild;)e.removeChild(e.lastChild)},g=e=>document.getElementById(e),c=e=>document.getElementsByClassName(e),n=e=>document.getElementsByName(e),s=e=>Array.from(document.querySelectorAll(e)),u=(e="",t={})=>{let r=new URL(e,window.location.href);return Object.entries(t).forEach(e=>{var[t,e]=e;r.searchParams.set(t,e)}),r.toString()},r=e=>window.addEventListener("DOMContentLoaded",e);export{h,t,x,g,c,n,u,s,r};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<head>
|
||||||
|
<title>Conversation Test</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="/css/hack.css" />
|
||||||
|
<link rel="stylesheet" href="/css/gruvbox-dark.css" />
|
||||||
|
<link rel="stylesheet" href="/css/shim.css" />
|
||||||
|
<link rel="stylesheet" href="/css/snow.css?snowfix=20211201" />
|
||||||
|
<script type="module" src="/static/js/conversation.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="snow hack gruvbox-dark">
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
</header>
|
||||||
|
<div class="snowframe">
|
||||||
|
<h1><code>xeblog-conv</code> Test</h1>
|
||||||
|
|
||||||
|
<xeblog-conv name="Numa" mood="delet">
|
||||||
|
<p>Delete this! <a href="https://christine.website">Go home</a>.</p>
|
||||||
|
|
||||||
|
<p>I'm baby 3 wolf moon iPhone magna, woke deep v humblebrag butcher ipsum XOXO aesthetic prism pop-up vexillologist non. Activated charcoal dolore sed, williamsburg hammock hashtag cardigan next level live-edge before they sold out mlkshk single-origin coffee. Celiac kickstarter consequat chillwave tattooed quis iceland schlitz copper mug taxidermy. Selvage flexitarian tattooed palo santo. Quis dolore vaporware distillery cred. Nostrud exercitation esse kogi veniam lo-fi selfies listicle lyft, mixtape disrupt offal.</p>
|
||||||
|
</xeblog-conv>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
Loading…
Reference in New Issue