現在行の左端にPopup Menuもどきを表示する
/shokai/helpfeel記法 カッコ閉じ忘れチェッカー（event版）のUIをベースに、選択範囲無しでボタンなどを表示できるPopupMenuもどきを作ってみる
2021-07-29
20:58:09 ボタンも表示してみた
20:37:28 いい感じ
jsimport("/api/code/takker/現在行の左端にPopup_Menuもどきを表示する/test.js");test.jslet cursorLine = document.getElementsByClassName('cursor-line')?.[0];
const container = createPopupContainer();
const editor = document.getElementById('editor');
editor.append(container);
const textInput = document.getElementById('text-input');
const observer = new MutationObserver(() =>
container.style.top = `${parseInt(textInput.style.top) + parseInt(textInput.style.height)}px`
);
observer.observe(document.getElementsByClassName('lines')[0], {attributes: true, subtree: true, attributeFilter: ['class']});test.js
function createPopupContainer() {
const popupMenu = document.createElement('div');
popupMenu.attachShadow({mode: 'open'});
popupMenu.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
left: 0px;
width:100%;
z-index:300;
user-select:none;
font-family:"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
pointer-events:none
}
.button-container {
position: relative;
display:inline-block;
max-width:70vw;
min-width:80px;
text-align:center;
background-color:#111;
padding:0 1px;
border-radius:4px;
pointer-events:auto
}
</style>
<div class="button-container">Sample Text</div>
`;
return popupMenu;
}jsimport("/api/code/takker/現在行の左端にPopup_Menuもどきを表示する/test2.js");test2.jslet cursorLine = document.getElementsByClassName('cursor-line')?.[0];
const {popupMenu, render} = createPopupContainer();
const editor = document.getElementById('editor');
editor.append(popupMenu);
render(["Send", "👎scrapbox", "👍Keicho", "👍Keichoに話しかけたい", "👍話しかけたい"]);
const cursor = document.getElementsByClassName('cursor')[0];
const observer = new MutationObserver(() =>
popupMenu.style.top = `${parseInt(cursor.style.top) + parseInt(cursor.style.height) + 4}px`
);
observer.observe(document.getElementsByClassName('lines')[0], {attributes: true, subtree: true, attributeFilter: ['class']});
function createPopupContainer() {
const popupMenu = document.createElement('div');
popupMenu.attachShadow({mode: 'open'});
popupMenu.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
left: 0px;
width:100%;
z-index:300;
user-select:none;
font-family:"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
pointer-events:none
}
.button-container {
position: relative;
display:inline-block;
max-width:70vw;
min-width:80px;
text-align:center;
background-color:#111;
padding:0 1px;
border-radius:4px;
pointer-events:auto
}
html[data-os*='android'] .button-container {
max-width:90vw
}
html[data-os*='ios'] .button-container {
max-width:90vw
}
.button {
font-size:11px;
color:#eee;
cursor:pointer;
display:inline-block;
padding:0 5px
}
.button:not(:first-of-type) {
border:0;
border-left:1px solid #eee
}
.button.selected {
background-color:#222;
text-decoration:underline
}
html[data-os*='android'] .button {
font-size:13px;
padding:6px;
min-width:12vw
}
html[data-os*='ios'] .button{
font-size:13px;
padding:6px;
min-width:12vw
}
.button div.icon {
height:2em;
max-width:10em;
display:inline-block;
overflow:hidden;
margin-left:1px;
vertical-align:top
}
.button div.icon img {
max-height:100%;
vertical-align:unset
}
</style>
<div class="button-container"></div>
`;
const buttonContainer = popupMenu.shadowRoot.lastElementChild;
return {
popupMenu,
render(buttons) {
buttonContainer.textContent = '';
buttonContainer.insertAdjacentHTML('beforeend', buttons.map(button => `
<div class="button">${button}</div>
`).join(''));
},
};
}#2021-07-29 20:00:34