scrapbox-card-bubble-2
今後はそっちで開発する
scrapbox-card-bubbleの実装の一つ
関連ページリストを吹き出し表示するUserScriptの次期version
変更点
Web Componentsを使用する
一旦Web Componentの練習をするべきだな
component設計
page-card 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 html<div id="container">
<div id="grid">
<slot name="card"></slot>
</div>
</div>関連ページのfetchと計算の設計の見直し
単一責任の原則に基づいて分離した
fetch
リンク計算
ページのparse
これscrapbox-text-bubbleにも応用できないかな
作ったデータは保存しておく
2021-01-15 14:26:08 これも
<page-card> に含めてしまってもいいのでは？Page cardの表示方法を全て
<page-card> の中で解決できるスタイルの変更が楽になる
外からは、
project name
page title
descriptions
image url
を渡せばいい
あとはそれぞれの機能とやり取りするための変換関数を用意しておく
code
page card component
使い方
html<page-card project="hoge" title="huga" descriptions="text\ntext\ntext" thumbnail="https://...">
</page-card>css
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;
}
#takker-rel-cards-bubble .page-list-item {
display: inline-block;
white-space: normal;
margin: 0 10px 10px 0;
}html
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>pageCard.jsexport 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() {
return ['project','title'];
}
attributeChangedCallback(name, oldValue, newValue) { // (4)
this.render();
}
}#2021-01-15 14:33:47
#2020-12-09 21:41:29
#2020-12-05 23:52:55
#2020-11-15 20:00:07