generated at
scrapbox-text-bubble-2
予めbundleしたもの

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%; color: var(--code-color, #342d9c); 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; border-left: solid 4px #a0a0a0; 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 { color: #9c6248; } .helpfeel { background-color: #fbebdd; border-radius: 4px; padding: 3px !important; } .helpfeel .prefix { color: #f17c00; } .helpfeel .entry { color: #cc5020; } .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; color: #342d9c; background-color: #ffcfc6; font-size: .9em; padding: 1px 2px; } .code-block-start a { color: #342d9c; text-decoration: underline; } .copy { font-family: 'FontAwesome'; cursor: pointer; } .table-block { white-space: nowrap; } .table-block-start { padding: 1px 2px; font-size: .9em; background-color: #ffcfc6; } .table-block-start a { color: #342d9c; 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 { color: var(--page-link-color, #5e8af7); 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._lineIds[o]}`},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; background-color: var(--page-bg, #fefefe); color: var(--page-text-color, #4a4a4a); 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-2]Enter 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-2]Leave 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};

#2021-05-25 18:26:06