scrapbox-card-bubble-2/pageCard

実装を考える

タグ名

page-card

使い方

code:html

<page-card

project="hoge"

title="huga"

theme="default-light"

description="text\ntext\ntext"

</page-card>

記法のparseはComponent内部で行う

属性のままにする

機能

属性の変更を検知して色々変える

theme

色を変える

といってもComponent側ですることはない

description

thumbnail

code

code:script.js

import {style, a, div, li, img, fragment, h} from '../easyDOMgenerator/script.js';

import {parse, css as cardCSS} from '../scrapbox-card-bubble-2%2Fparser/script.js';

import {css} from './css.js';

const TAG_NAME = 'related-page-card';

customElements.define(TAG_NAME, class extends HTMLElement {

constructor() {

super();

const shadowRoot = this.attachShadow({mode: 'open'});

shadowRoot.appendChild(fragment(

style(css+cardCSS),

li(

a({id: 'link', type: 'link'},

div({id: 'hover'}),

div({id: 'content'},

div({id: 'header'},

div({id: 'title'})

),

div({id: 'description', style: 'display: none;'}),

div({id: 'icon', style: 'display: none;'}, img({loading: 'lazy'}))

),

),

),

));

this._link = shadowRoot.getElementById('link');

this._icon = shadowRoot.getElementById('icon');

this._description = shadowRoot.getElementById('description');

this._title= shadowRoot.getElementById('title');

}

get project() {

return this.getAttribute('project');

}

set project(value) {

this.setAttribute('project', value);

}

get href() {

return this._link.href;

}

get title() {

return this.getAttribute('title');

}

set title(value) {

this.setAttribute('title', value);

}

get thumbnail() {

return this.getAttribute('thumbnail');

}

set thumbnail(value) {

this.setAttribute('thumbnail', value);

}

set description(value) {

this.setAttribute('description', value);

}

// page cardを更新する

attributeChangedCallback(name, oldValue, newValue) { // (4)

switch (name) {

case 'project':

this._updateLink(newValue, this.title);

break;

case 'title':

this._updateLink(this.project, newValue);

break;

case 'description':

// DOMを入れ替える

this._description.textContent = '';

this._description.style = '';

this._description.append(...parse(newValue, this.project));

this._icon.style = 'display: none;';

break;

case 'thumbnail':

// 有効なURLでなければ何もしない

try {

new URL(newValue);

} catch(_) {

return;

}

this._icon.firstElementChild.src = newValue;

this._icon.style = '';

this._description.style = 'display: none;';

this._icon.firstElementChild.onerror = () => {

this._description.style = '';

this._icon.style = 'display: none;';

this._icon.firstElementChild.onerror = undefined;

};

break;

}

}

_updateLink(project, title) {

this._title.textContent = title;

// 外部projectの場合は新しいタブで開くようにする

if (scrapbox.Project.name) {

this._link.removeAttribute('target');

this._link.rel = 'route';

} else {

this._link.removeAttribute('rel');

this._link.target = '_blank';

}

}

static get observedAttributes() {

}

});

export const relatedPageCard = (...params) => h(TAG_NAME, ...params);

CSS

custom properties

--card-bg

--card-box-shadow

--card-title-color

-card-title-bg

--card-box-hover-shadow

--card-hover-bg

--card-description-color

code:css.js

export const css = `

* {

box-sizing: border-box;

}

li {

display: block;

float: none;

position: relative;

width: 140px;

height: 140px;

}

code:css.js

a{

display: block;

position: relative;

height: inherit;

width: inherit;

overflow: hidden;

text-overflow: ellipsis;

font-family: "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;

box-shadow: var(--card-box-shadow, 0 2px 0 rgba(0,0,0,0.12));

border-radius: 2px;

word-break: break-word;

text-decoration: none;

}

a:hover {

box-shadow: var(--card-box-hover-shadow, 0 2px 0 rgba(0,0,0,0.23));

}

a:focus {

outline: 0;

box-shadow: 0 0px 0px 3px rgba(102,175,233,0.6);

transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s

}

code:css.js

opacity: 0;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background-color: var(--card-hover-bg, rgba(0,0,0,0.05));

mix-blend-mode: multiply;

z-index: 1;

transition: background-color .1s

}

opacity: 1;

}

opacity: 1;

background-color: var(--card-active-bg, rgba(0,0,0,0.1))

}

code:css.js

height: calc(100% - 5px);

width: inherit;

display: flex;

flex-direction: column;

overflow: hidden;

}

別々にしても意味ない気がする

code:css.js

width: 100%;

text-overflow: ellipsis;

padding: 10px 12px;

}

何故かタイトルが折り返されない

https://gyazo.com/18eec4a0529656d126ae8b5497fd9edf

CSSは同じのはずなんだけど……

code:css.js

font-size: 14px;

line-height: 20px;

font-weight: bold;

max-height: 60px;

margin: 0;

overflow: hidden;

display: block;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

}

code:css.js

line-height: 20px;

padding: 10px 12px 0;

font-size: 12px;

white-space: pre-line;

column-count: 1;

column-gap: 2em;

column-width: 10em;

height: inherit;

color: var(--card-description-color, gray);

flex-shrink: 16;

overflow: hidden;

}

code:css.js

display: block;

width: 100%;

padding: 0 5px;

margin: 0 auto;

}

display: block;

width: 100%;

margin: 0 auto;

}

`;

test code

code:js

import('/api/code/programming-notes/scrapbox-card-bubble-2%2FpageCard/test1.js')

.then(({execute}) => execute());

code:test1.js

import {relatedPageCard} from './script.js';

import {ul} from '../easyDOMgenerator/script.js';

export async function execute() {

const {relatedPages: {links1hop}} = await res.json();

document.getElementById('editor').append(ul({style: 'position: fixed; top: 5vh; left: 5vw; list-style: none;'},

...links1hop.map(({title, descriptions, image}) =>

relatedPageCard({

project: scrapbox.Project.name,

title,

thumbnail: image,

description: descriptions.join('\n')

})

)

));

}