41 lines
30 KiB
JavaScript
41 lines
30 KiB
JavaScript
|
(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))o(t);new MutationObserver(t=>{for(const e of t)if(e.type==="childList")for(const l of e.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&o(l)}).observe(document,{childList:!0,subtree:!0});function n(t){const e={};return t.integrity&&(e.integrity=t.integrity),t.referrerpolicy&&(e.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?e.credentials="include":t.crossorigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function o(t){if(t.ep)return;t.ep=!0;const e=n(t);fetch(t.href,e)}})();class r{constructor({input:i,onSubmit:n,onShow:o,onHide:t}){this.event={onShow:o,onHide:t,onSubmit:n};let e="\u{1F600} \u{1F603} \u{1F604} \u{1F601} \u{1F606} \u{1F605} \u{1F602} \u{1F923} \u{1F972} \u263A\uFE0F \u{1F60A} \u{1F607} \u{1F642} \u{1F643} \u{1F609} \u{1F60C} \u{1F60D} \u{1F970} \u{1F618} \u{1F617} \u{1F619} \u{1F61A} \u{1F60B} \u{1F61B} \u{1F61D} \u{1F61C} \u{1F92A} \u{1F928} \u{1F9D0} \u{1F913} \u{1F60E} \u{1F978} \u{1F929} \u{1F973} \u{1F60F} \u{1F612} \u{1F61E} \u{1F614} \u{1F61F} \u{1F615} \u{1F641} \u2639\uFE0F \u{1F623} \u{1F616} \u{1F62B} \u{1F629} \u{1F97A} \u{1F622} \u{1F62D} \u{1F624} \u{1F620} \u{1F621} \u{1F92C} \u{1F92F} \u{1F633} \u{1F975} \u{1F976} \u{1F631} \u{1F628} \u{1F630} \u{1F625} \u{1F613} \u{1F917} \u{1F914} \u{1F92D} \u{1F92B} \u{1F925} \u{1F636} \u{1F610} \u{1F611} \u{1F62C} \u{1F644} \u{1F62F} \u{1F626} \u{1F627} \u{1F62E} \u{1F632} \u{1F971} \u{1F634} \u{1F924} \u{1F62A} \u{1F635} \u{1F910} \u{1F974} \u{1F922} \u{1F92E} \u{1F927} \u{1F637} \u{1F912} \u{1F915} \u{1F911} \u{1F920} \u{1F608} \u{1F47F} \u{1F479} \u{1F47A} \u{1F921} \u{1F4A9} \u{1F47B} \u{1F480} \u2620\uFE0F \u{1F47D} \u{1F47E} \u{1F916} \u{1F383} \u{1F63A} \u{1F638} \u{1F639} \u{1F63B} \u{1F63C} \u{1F63D} \u{1F640} \u{1F63F} \u{1F63E}";e+=" \u{1F44B} \u{1F91A} \u{1F590} \u270B \u{1F596} \u{1F44C} \u{1F90C} \u{1F90F} \u270C\uFE0F \u{1F91E} \u{1F91F} \u{1F918} \u{1F919} \u{1F448} \u{1F449} \u{1F446} \u{1F595} \u{1F447} \u261D\uFE0F \u{1F44D} \u{1F44E} \u270A \u{1F44A} \u{1F91B} \u{1F91C} \u{1F44F} \u{1F64C} \u{1F450} \u{1F932} \u{1F91D} \u{1F64F} \u270D\uFE0F \u{1F485} \u{1F933} \u{1F4AA} \u{1F9BE} \u{1F9B5} \u{1F9BF} \u{1F9B6} \u{1F463} \u{1F442} \u{1F9BB} \u{1F443} \u{1FAC0} \u{1FAC1} \u{1F9E0} \u{1F9B7} \u{1F9B4} \u{1F440} \u{1F441} \u{1F445} \u{1F444} \u{1F48B} \u{1FA78}",e+=" \u{1F476} \u{1F467} \u{1F9D2} \u{1F466} \u{1F469} \u{1F9D1} \u{1F468} \u{1F469}\u200D\u{1F9B1} \u{1F9D1}\u200D\u{1F9B1} \u{1F468}\u200D\u{1F9B1} \u{1F469}\u200D\u{1F9B0} \u{1F9D1}\u200D\u{1F9B0} \u{1F468}\u200D\u{1F9B0} \u{1F471}\u200D\u2640\uFE0F \u{1F471} \u{1F471}\u200D\u2642\uFE0F \u{1F469}\u200D\u{1F9B3} \u{1F9D1}\u200D\u{1F9B3} \u{1F468}\u200D\u{1F9B3} \u{1F469}\u200D\u{1F9B2} \u{1F9D1}\u200D\u{1F9B2} \u{1F468}\u200D\u{1F9B2} \u{1F9D4} \u{1F475} \u{1F9D3} \u{1F474} \u{1F472} \u{1F473}\u200D\u2640\uFE0F \u{1F473} \u{1F473}\u200D\u2642\uFE0F \u{1F9D5} \u{1F46E}\u200D\u2640\uFE0F \u{1F46E} \u{1F46E}\u200D\u2642\uFE0F \u{1F477}\u200D\u2640\uFE0F \u{1F477} \u{1F477}\u200D\u2642\uFE0F \u{1F482}\u200D\u2640\uFE0F \u{1F482} \u{1F482}\u200D\u2642\uFE0F \u{1F575}\uFE0F\u200D\u2640\uFE0F \u{1F575}\uFE0F \u{1F575}\uFE0F\u200D\u2642\uFE0F \u{1F469}\u200D\u2695\uFE0F \u{1F9D1}\u200D\u2695\uFE0F \u{1F468}\u200D\u2695\uFE0F \u{1F469}\u200D\u{1F33E} \u{1F9D1}\u200D\u{1F33E} \u{1F468}\u200D\u{1F33E} \u{1F469}\u200D\u{1F373} \u{1F9D1}\u200D\u{1F373} \u{1F468}\u200D\u{1F373} \u{1F469}\u200D\u{1F393} \u{1F9D1}\u200D\u{1F393} \u{1F468}\u200D\u{1F393} \u{1F469}\u200D\u{1F3A4} \u{1F9D1}\u200D\u{1F3A4} \u{1F468}\u200D\u{1F3A4} \u{1F469}\u200D\u{1F3EB} \u{1F9D1}\u200D\u{1F3EB} \u{1F468}\u200D\u{1F3EB} \u{1F469}\u200D\u{1F3ED} \u{1F9D1}\u200D\u{1F3ED} \u{1F468}\u200D\u{1F3ED} \u{1F469}\u200D\u{1F4BB} \u{1F9D1}\u200D\u{1F4BB} \u{1F468}\u200D\u{1F4BB} \u{1F469}\u200D\u{1F4BC} \u{1F9D1}\u200D\u{1F4BC} \u{1F468}\u200D\u{1F4BC} \u{1F469}\u200D\u{1F527} \u{1F9D1}\u200D\u{1
|
||
|
|
ul.emojilist::-webkit-scrollbar { width : 10px; height: 1px; }
|
||
|
|
ul.emojilist::-webkit-scrollbar-thumb { border-radius:10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); }
|
||
|
|
ul.emojilist::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px; }
|
||
|
|
ul.emojilist::-webkit-scrollbar-thumb:hover { background-color: #ccc; }
|
||
|
|
ul.emojilist { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; overflow-y:scroll; }
|
||
|
|
ul.emojilist > li {
|
||
|
|
display:flex;
|
||
|
|
justify-content:center;
|
||
|
|
items-align:center;
|
||
|
|
font-size: 32px;
|
||
|
|
height: 48px;
|
||
|
|
width: 48px;
|
||
|
|
line-height: 48px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 48px;
|
||
|
|
transition: all .25s;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
ul.emojilist.ok > li:hover {
|
||
|
|
background-color: rgba(0,0,0,.05);
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
`)),document.head.appendChild(i)}return this.element}async show(){this.create_window(),this.element.style.display="flex",this.div.offsetWidth,this.element.style.background="rgba(0,0,0,.6)",this.element.focus(),this.div.style.bottom="0px",await new Promise(i=>setTimeout(i,800)),this.ul.classList.add("ok"),this.event.onShow()}async hide(){this.ul.classList.remove("ok"),this.element.style.background="rgba(0,0,0,0)",this.div.style.bottom="-90%",await new Promise(i=>setTimeout(i,450)),this.element.parentNode.removeChild(this.element),this.element=null,this.event.onHide()}}document.querySelector("#app").innerHTML=`
|
||
|
|
<div>
|
||
|
|
<textarea id="textaret">\u{1F973}hello world! </textarea>
|
||
|
|
<div class="card">
|
||
|
|
<button id="counter" type="button">click here</button>
|
||
|
|
</div>
|
||
|
|
<p class="read-the-docs">
|
||
|
|
Click the button to test inserting emoji
|
||
|
|
</p>
|
||
|
|
<div>
|
||
|
|
<a href="https://git.satori.love/satori/emoji" target="_blank">gitea</a>
|
||
|
|
<a href="https://github.com/InvisibleFuture/emoji" target="_blank">github</a>
|
||
|
|
<a href="https://www.npmjs.com/package/satori-emoji" target="_blank">npm</a>
|
||
|
|
<a href="https://satori.love" target="_blank">satori</a>
|
||
|
|
<div>
|
||
|
|
</div>
|
||
|
|
`;const a=new r({input:document.querySelector("#textaret"),onShow:()=>{console.log("\u7EC4\u4EF6\u88AB\u6253\u5F00\u4E86")},onHide:()=>{console.log("\u7EC4\u4EF6\u88AB\u5173\u95ED\u4E86")},onSubmit:s=>{console.log("\u63D0\u4EA4\u4E86",s)}});document.querySelector("#counter").addEventListener("click",()=>{a.show()});
|