scrapbox-card-bubble-2
今後はそっちで開発する
/icons/hr.icon
/emoji/warning.iconWIP
変更点
component設計
page-card
code:html
<li class="page-list-item grid-style-itme">
<a href="/${project}/${encodeURIComponent(title)}" rel="route">
<div class="hover"></div>
<div class="content">
<div class="header">
<div class="title">${title}</div>
</div>
<slot name="description">Description</slot>
</div>
</a>
</li>
descriptionにサムネイル内容を入れる
projectとtitleはCustom Elementの属性から注入する
カードを格納するcontainer
card-container
code:html
<div id="container">
<div id="grid">
<slot name="card"></slot>
</div>
</div>
code:shadow.css
関連ページのfetchと計算の設計の見直し
fetch
リンク計算
ページのparse
作ったデータは保存しておく
2021-01-15 14:26:08 これも <page-card>に含めてしまってもいいのでは？
Page cardの表示方法を全て<page-card>の中で解決できる
スタイルの変更が楽になる
外からは、
project name
page title
descriptions
image url
を渡せばいい
あとはそれぞれの機能とやり取りするための変換関数を用意しておく
code
page card component
使い方
code:html
<page-card project="hoge" title="huga" descriptions="text\ntext\ntext" thumbnail="https://..."> </page-card>
css
code:pageCard.css
.takker-cards {
width: 120px;
height: 120px;
white-space: nowrap;
}
.takker-cards li{
float: none !important;
}
/* 余白を詰める */
.takker-cards.grid li.page-list-item a .header {
padding-bottom: 0px;
}
.takker-cards.grid li.page-list-item a .title {
float: left;
max-height: 40px;
-webkit-line-clamp: 2;
}
.takker-cards.grid li.page-list-item a .description {
line-height: normal;
padding-top: 0px;
}
display: inline-block;
white-space: normal;
margin: 0 10px 10px 0;
}
html
code:pageCard.html
<template id="takker-scrapbox-text-bubble">
<link rel="stylesheet" href="/api/code/scrapbox-card-bubble-2/pageCard.css"></link>
<li class="page-list-item grid-style-itme">
<a href="/${project}/${encodeURIComponent(title)}" rel="route">
<div class="hover"></div>
<div class="content">
<div class="header">
<div class="title">${title}</div>
</div>
<slot name="description">Description</slot>
</div>
</a>
</li>
</template>
code:pageCard.js
export class PageCard extends HTMLElement {
constructor(){
super();
}
// PageCardを描画する
render() {
this.textContent = '';
const project = this.getAttribute('width');
const title = this.getAttribute('width');
this.insertAdjacentHTML('beforeend', `
<style>@import '/api/code/scrapbox-card-bubble-2/pageCard.css';</style>
<li class="page-list-item grid-style-itme">
<a href="/${project}/${encodeURIComponent(title)}" rel="route">
<div class="hover"></div>
<div class="content">
<div class="header">
<div class="title">${title}</div>
</div>
${content}
</div>
</a>
</li>
`);
}
connectedCallback() {
if (this.rendered) return;
this.attachShadow({mode: 'open'});
const body = document
.getElementById('takker-scrapbox-text-bubble').content.cloneNode(true);
body.
this.shadowRoot.append(body);
this.rendered = true;
}
static get observedAttributes() {
}
attributeChangedCallback(name, oldValue, newValue) { // (4)
this.render();
}
}