scrapbox-text-bubble-2
予めbundleしたもの
code:script.js
import{ScrapboxParser as k}from"../scrapbox-parser.min.js/parser.js";import{div as w,span as a,code as h,blockquote as v,strong as y,a as c,img as d,iframe as m,audio as $,fragment as j,style as N}from"../easyDOMgenerator/script.js";var x=`
a {
background-color: transparent;
text-decoration: none;
cursor: pointer;
}
img {
display: inline-block;
max-width: 100%;
max-height: 100px;
}
code {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 90%;
background-color: var(--code-bg, rgba(0,0,0,0.04));
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
blockquote {
background-color: var(--quote-bg-color, rgba(0,0,0,0.05));
display: block;
padding-left: 4px;
margin: 0px;
}
strong {
font-weight: bold;
}
iframe {
margin: 3px 0;
vertical-align: middle;
max-width: 100%;
width: 640px;
height: 360px;
display: inline-block;
border: 0;
}
audio {
vertical-align: middle;
white-space: initial;
max-width: 100%;
}
.formula {
margin: auto 6px;
}
.cli {
border-radius: 4px;
}
.cli .prefix {
}
.helpfeel {
border-radius: 4px;
padding: 3px !important;
}
.helpfeel .prefix {
}
.helpfeel .entry {
}
.code-block {
display: block;
line-height: 1.7em;
background-color: var(--code-bg, rgba(0,0,0,0.04));
}
.code-block-start {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: .9em;
padding: 1px 2px;
}
.code-block-start a {
text-decoration: underline;
}
.copy {
font-family: 'FontAwesome';
cursor: pointer;
}
.table-block {
white-space: nowrap;
}
.table-block-start {
padding: 1px 2px;
font-size: .9em;
}
.table-block-start a {
text-decoration: underline;
}
.cell {
margin: 0;
padding: 0 2px 0 8px;
box-sizing: content-box;
display: inline-block;
white-space: pre;
}
.cell:nth-child(2n+1) {
background-color: rgba(0,0,0,0.04);
}
.cell:nth-child(2n) {
background-color: rgba(0,0,0,0.06);
}
.strong-image {
max-height: 100%;
}
.icon {
height: 11px;
vertical-align: middle;
}
.strong-icon {
height: calc(11px * 1.2);
}
.deco-\\/ {font-style: italic;}
.deco-\\*-1 {font-weight: bold;}
.deco-\\*-2 {font-weight: bold; font-size: 1.20em;}
.deco-\\*-3 {font-weight: bold; font-size: 1.44em;}
.deco-\\*-4 {font-weight: bold; font-size: 1.73em;}
.deco-\\*-5 {font-weight: bold; font-size: 2.07em;}
.deco-\\*-6 {font-weight: bold; font-size: 2.49em;}
.deco-\\*-7 {font-weight: bold; font-size: 3.00em;}
.deco-\\*-8 {font-weight: bold; font-size: 3.58em;}
.deco-\\*-9 {font-weight: bold; font-size: 4.30em;}
.deco-\\*-10 {font-weight: bold; font-size: 5.16em;}
.deco-\\- {text-decoration: line-through;}
.deco-_ {text-decoration: underline;}
.page-link {color: var(--page-link-color, #5e8af7);} .page-link:hover {color: var(--page-link-hover-color, #2d67f5);} .empty-page-link {color: :var(--empty-page-link-color, #fd7373);} .empty-page-link:hover {color: :var(--empty-page-link-hover-color, #fd7373);} .link {
text-decoration: underline;
}
.link:hover {color: var(--page-link-color-hover-color, #2d67f5);} .permalink {
background-color: var(--line-permalink-color, rgba(234,218,74,0.75));
}
,u=class{constructor(e,t,o){let i=e.map(({text:s})=>s).join(
);this._blocks=k.parse(i,{hasTitle:!1}),this.project=t,this.title=o,this._lineIds=e.map(({id:s})=>s)}parse(){let e=this._blocks.flatMap(t=>{switch(t.type){case"title":return"";case"codeBlock":return this._codeBlock(t);case"table":return this._table(t);case"line":return this._line(t)}}).map((t,o)=>w({className:"line",id:L${this._lineIdso}},t));return[N(x),...e]}_table({fileName:e,cells:t}){let o=/api/table/${this.project}/${this.title}/${e}.csv,i=a({className:"table-block"},a({className:"table-block-start"},c({href:o,target:"_blank"},e))),s=t.map(n=>a({className:"table-block table-block-row"},...n.map((l,_)=>a({className:cell col-${_}},l[0]?.text??""))));return[i,...s]}_codeBlock({fileName:e,content:t}){let o=/api/code/${this.project}/${this.title}/${e},i=a({className:"code-block"},a({className:"code-block-start"},e.includes(".")?c({href:o,target:"_blank"},e):e,a({className:"copy",title:"Copy",onclick:async({target:n})=>{navigator.clipboard.writeText(t);let l=n.textContent;n.textContent="Copied",setTimeout(()=>n.textContent=l,1e3)}},"\uF0C5"))),s=t.split( ).map(n=>h({className:"code-block"},n));return[i,...s]}_line({nodes:e}){return e=e.map(t=>this._node(t)),e.length>1?[j(...e.map(t=>a(t)))]:e}_node(e){switch(e.type){case"code":return h({className:"code"},e.text);case"formula":return h({className:"formul"},e.formula);case"commandLine":return h({className:"cli"},a({className:"prefix"},e.symbol),a(" "),a({className:"command"},e.text));case"helpfeel":return h({className:"helpfeel"},a({className:"prefix"},"?"),a(" "),a({className:"entry"},e.text));case"quote":return v({className:"quote"},...e.nodes.length!==1?e.nodes.map(t=>a(this._node(t))):[this._node(e.nodes[0])]);case"strongIcon":return this._icon(e,{isStrong:!0});case"icon":return this._icon(e);case"strongImage":return this._image(e,{isStrong:!0});case"image":return this._image(e);case"strong":return y(...e.nodes.length>1?e.nodes.map(t=>a(this._node(t))):[this._node(e.nodes[0])]);case"decoration":return a({className:e.decos.map(t=>deco-${t}).join(" ")},...e.nodes.length>1?e.nodes.map(t=>a(this._node(t))):[this._node(e.nodes[0])]);case"link":return this._link(e);case"hashTag":return c({type:"hashTag",className:"page-link",rel:"route",href:/${this.project}/${e.href}},#${e.href});case"googleMap":return a({className:"pointing-device-map"},c({href:https://www.google.com/maps/search/${e.place}/@${e.latitude},${e.longitude},${e.zoom}z},d({className:"google-map",src:/api/google-map/static-map?center=${e.latitude}%2C${e.longitude}&markers=${e.place}&zoom=${e.zoom}&_csrf=${window._csrf}})));case"plain":case"blank":return e.text}}_image({link:e,src:t},{isStrong:o=!1}={}){let i=e||(/https:\/\/gyazo\.com\/[^\/]+\/thumb\/1000/.test(t)?t.slice(0,-"/thumb/1000".length):t);return c({...e?{className:"link"}:{},href:i,rel:"noopener noreferrer",target:"_blank"},d({src:t,className:o?"image strong-image":"image"}))}_icon({pathType:e,path:t},{isStrong:o=!1}={}){let i=e==="relative"?this.project:t.match(/\/([\w\-]+)/)[1],s=e==="relative"?t:t.match(/\/[\w\-]+\/(.+)$/)[1];return c({href:t},d({className:o?"icon strong-icon":"icon",src:/api/pages/${i}/${s}/icon,alt:s,title:s}))}_link({pathType:e,href:t,content:o}){switch(e){case"root":return c({className:"page-link",href:t},t);case"relative":return c({className:"page-link",href:/${this.project}/${encodeURIComponent(t)}},t);case"absolute":let i=new URL(t);switch(i.hostname){case"www.youtube.com":let s=i.searchParams.get("v");return m({src:https://www.youtube.com/embed/${s}?autoplay=0&start=0,type:"text/html",allowfullscreen:""});case"vimeo.com":let n=i.pathname.slice(1);return m({src:https://player.vimeo.com/video/${n},type:"text/html",allowfullscreen:""});default:break}return/\.(?:mp3|ogg|wav)/.test(t)??o===""?$({controls:"",preload:"none",src:t}):c({className:"link",href:t,rel:"noopener noreferrer",target:"_blank"},o||t)}}};function g(r,e,t){return new u(r,e,t).parse()}import{h as L}from"../easyDOMgenerator/script.js";var C= :host {
padding: 5px 0px 5px 5px;
font-size: 11px;
line-height: 1.42857;
user-select: text;
position: absolute;
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
/*max-height: 80vh;
overflow-y: auto;*/
z-index: 9000;
}
;customElements.define("preview-box",class extends HTMLElement{constructor(){super();let r=this.attachShadow({mode:"open",delegatesFocus:!0});r.innerHTML=<style>${C}</style>
<div id="box"></div>,this._box=r.getElementById("box"),this._onmouseenterCallback=void 0,this._onmouseleaveCallback=void 0,this._loading=void 0}connectedCallback(){this.hide()}get project(){return this._project}get title(){return this._title}set path(r){this.setAttribute("path",r)}set theme(r){this.setAttribute("theme",r)}position({top:r,left:e}){this.style.top=${r}px,this.style.left=${e}px}async show(){if(await this._loading,this._box.childElementCount<2){this.hide();return}this.hidden=!1,!!this._lineId}hide(){this.hidden=!0}set onmouseenterInLink(r){this.shadowRoot.removeEventListener("mouseenter",this._onmouseenterCallback,{capture:!0}),this._onmouseenterCallback=e=>{!e.target.matches(".page-link")||r(e)},this.shadowRoot.addEventListener("mouseenter",this._onmouseenterCallback,{capture:!0})}static get observedAttributes(){return["path","theme"]}attributeChangedCallback(r,e,t){if(e!==t)switch(r){case"path":let[o,i]=decodeURIComponent(t).match(/^\/([\w\-]+)\/(.+)$/).slice(1);this._project=o,this._title=i,this._createBody();break;case"theme":break}}_createBody(){if(!this._project||!this._title)return;this._lineId=this._title.match(/#([\d\w+]+)$/)?.[1];let r=this._lineId?this._title.slice(0,-this._lineId.length-1):this._title;this._loading=(async()=>{let e=await fetch(/api/pages/${this._project}/${encodeURIComponent(r)});if(!e.ok){this._replace(document.createTextNode("An invalid page source."));return}let{lines:t}=await e.json();t=t.slice(1);let o=g(t,this._project,this._title);if(!this._lineId){this._replace(...o);return}let i=L${this._lineId},s=o.findIndex(n=>n.id===i);if(s<0){this._replace(...o);return}this._replace(o[0],...o.slice(s)),this.shadowRoot.getElementById(i).classList.add("permalink")})()}_replace(...r){this._box.textContent="",r.length!==0&&this._box.append(...r)}});var b=(...r)=>L("preview-box",...r);import{scrapboxDOM as p}from"../scrapbox-dom-accessor/script.js";var f=class{constructor({projects:e=[],delay:t=650}={}){this._list=[],this._timer=null,this._acceptProjects=[...new Set([...e,scrapbox.Project.name])],this._delay=t,p.editor.parentElement.addEventListener("pointerenter",({target:i})=>{let s=i.closest(".page-link, .page-list-item > a");!s||this._onenterLink(0,s)},{capture:!0}),p.editor.parentElement.addEventListener("pointerleave",({target:i})=>{!i.matches(".page-link, .page-list-item > a")||this._onleave(0)},{capture:!0}),p.editor.parentElement.addEventListener("click",({target:i})=>{if(i.matches("preview-box")){let s=this._indexOf(i);this._hide(s+1);return}this._hide(0)},{capture:!0}),new MutationObserver(()=>{clearTimeout(this._timer),this._remove(0)}).observe(document.getElementsByTagName("title")[0],{childList:!0})}_indexOf(e){return this._list.indexOf(e)}_onenterBox(e){this._onleave(e+1),this._show(e)}_onenterLink(e,t){let{top:o,left:i}=t.getBoundingClientRect(),s=p.editor.getBoundingClientRect(),n=t.href.slice("https://scrapbox.io".length);!this._acceptProjects.includes(n.match(/^\/([\w\-]+)/)[1])||(this._add(e,{path:n,top:o+(t.matches(".page-link")?18:140)-s.top,left:i-s.left}),clearTimeout(this._timer),this._timer=setTimeout(()=>this._show(e),this._delay))}_onleave(e){clearTimeout(this._timer),this._timer=setTimeout(()=>this._hide(e),this._delay)}async _show(e){e<0||this._list.length<=e||await Promise.all(this._list.slice(0,e+1).map(async t=>{if(await t.show(),!!t.hidden){for(let o of this._acceptProjects)if(t.path=/${o}/${t.title},await t.show(),!t.hidden)return}}))}_hide(e){e<0||this._list.length<=e||this._list.slice(e).forEach(t=>t.hide())}_add(e,{path:t,top:o,left:i}){if(e<0||this._list.length<e||t===this._list[e]?.path)return;let s=b({path:t});s.position({top:o,left:i}),s.onmouseenterInLink=({target:n})=>this._onenterLink(e+1,n),s.addEventListener("pointerenter",()=>{console.log(scrapbox-text-bubble-2Enter No. ${e}),this._onenterBox(e)},{capture:!0}),s.addEventListener("pointerleave",({screenX:n,screenY:l})=>{document.elementFromPoint(n,l).matches("preview-box")||(console.log(scrapbox-text-bubble-2Leave No. ${e}`),this._onleave(e))},{capture:!0}),this._remove(e),this._list.push(s),p.editor.append(s)}_remove(e){if(e<0||this._list.length<=e)return;let t=this._list.slice(e);this._list=this._list.slice(0,e),t.forEach(o=>o.remove())}};export{f as TextBubble};