mirror of
https://github.com/friendica/friendica
synced 2024-12-23 12:00:16 +00:00
202 lines
111 KiB
JavaScript
202 lines
111 KiB
JavaScript
|
const EmojiPicker=function(e){this.options=e,this.trigger=this.options.trigger.map(e=>e.selector),this.insertInto=void 0;let i="",t="",o,l=!1,a=this.options.closeButton?370:350;this.lib=function(e){let i=e=>{var i=Object.prototype.toString.call(e);return"object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&"number"==typeof e.length&&(0===e.length||"object"==typeof e[0]&&e[0].nodeType>0)};return{el(){if(e)return e.nodeName?[e]:i(e)?Array.from(e):"string"==typeof e||"STRING"==typeof e?Array.from(document.querySelectorAll(e)):void 0},on(e,i,t){t?this.el().forEach(o=>{o.addEventListener(e,e=>{if(e.target.closest(t)){let o;if(Array.isArray(t)){let l=e.target.outerHTML,a=t.findIndex(e=>l.includes(e.slice(1)));o=t[a]}i(e,o)}})}):this.el().forEach(t=>{t.addEventListener(e,i.bind(t))})},css(e){for(let i in e)if(Object.hasOwnProperty.call(e,i)){let t=e[i];this.el().forEach(e=>e.style[i]=t)}},attr(e,i){if(!i)return this.el()[0].getAttribute(e);this.el().forEach(t=>t.setAttribute(e,i))},removeAttr(e){this.el().forEach(i=>i.removeAttribute(e))},addClass(e){this.el().forEach(i=>i.classList.add(e))},removeClass(e){this.el().forEach(i=>i.classList.remove(e))},slug:e=>e.toLowerCase().replace(/[^\u00BF-\u1FFF\u2C00-\uD7FF\w]+|[\_]+/ig,"-").replace(/ +/g,"-"),remove(e){this.el().forEach(e=>e.remove())},val(e){let i;return void 0===e?this.el().forEach(e=>{i=e.value}):this.el().forEach(i=>{i.value=e}),i},text(i){if(void 0===i)return e.innerText;this.el().forEach(e=>{e.innerText=i})},html(i){if(void 0===i)return e.innerHTML;this.el().forEach(e=>{e.innerHTML=i})}}};let m={People:[{emoji:"\uD83D\uDE00",title:"Grinning Face"},{emoji:"\uD83D\uDE03",title:"Grinning Face with Big Eyes"},{emoji:"\uD83D\uDE04",title:"Grinning Face with Smiling Eyes"},{emoji:"\uD83D\uDE01",title:"Beaming Face with Smiling Eyes"},{emoji:"\uD83D\uDE06",title:"Grinning Squinting Face"},{emoji:"\uD83D\uDE05",title:"Grinning Face with Sweat"},{emoji:"\uD83E\uDD23",title:"Rolling on the Floor Laughing"},{emoji:"\uD83D\uDE02",title:"Face with Tears of Joy"},{emoji:"\uD83D\uDE42",title:"Slightly Smiling Face"},{emoji:"\uD83D\uDE43",title:"Upside-Down Face"},{emoji:"\uD83D\uDE09",title:"Winking Face"},{emoji:"\uD83D\uDE0A",title:"Smiling Face with Smiling Eyes"},{emoji:"\uD83D\uDE07",title:"Smiling Face with Halo"},{emoji:"\uD83E\uDD70",title:"Smiling Face with Hearts"},{emoji:"\uD83D\uDE0D",title:"Smiling Face with Heart-Eyes"},{emoji:"\uD83E\uDD29",title:"Star-Struck"},{emoji:"\uD83D\uDE18",title:"Face Blowing a Kiss"},{emoji:"\uD83D\uDE17",title:"Kissing Face"},{emoji:"☺️",title:"Smiling Face"},{emoji:"\uD83D\uDE1A",title:"Kissing Face with Closed Eyes"},{emoji:"\uD83D\uDE19",title:"Kissing Face with Smiling Eyes"},{emoji:"\uD83E\uDD72",title:"Smiling Face with Tear"},{emoji:"\uD83D\uDE0B",title:"Face Savoring Food"},{emoji:"\uD83D\uDE1B",title:"Face with Tongue"},{emoji:"\uD83D\uDE1C",title:"Winking Face with Tongue"},{emoji:"\uD83E\uDD2A",title:"Zany Face"},{emoji:"\uD83D\uDE1D",title:"Squinting Face with Tongue"},{emoji:"\uD83E\uDD11",title:"Money-Mouth Face"},{emoji:"\uD83E\uDD17",title:"Smiling Face with Open Hands"},{emoji:"\uD83E\uDD2D",title:"Face with Hand Over Mouth"},{emoji:"\uD83E\uDD2B",title:"Shushing Face"},{emoji:"\uD83E\uDD14",title:"Thinking Face"},{emoji:"\uD83E\uDD10",title:"Zipper-Mouth Face"},{emoji:"\uD83E\uDD28",title:"Face with Raised Eyebrow"},{emoji:"\uD83D\uDE10",title:"Neutral Face"},{emoji:"\uD83D\uDE11",title:"Expressionless Face"},{emoji:"\uD83D\uDE36",title:"Face Without Mouth"},{emoji:"\uD83D\uDE36\uD83C\uDF2B️",title:"Face in Clouds"},{emoji:"\uD83D\uDE0F",title:"Smirking Face"},{emoji:"\uD83D\uDE12",title:"Unamused Face"},{emoji:"\uD83D\uDE44",title:"Face with Rolling Eyes"},{emoji:"\uD83D\uDE2C",title:"Grimacing Face"},{emoji:"\uD83D\uDE2E\uD83D\uDCA8",title:"Face Exhaling"},{emoji:"\uD83E\uDD25",title:"Lying Face"},{emoji:"\uD83D\uDE0C",title:"Relieved Face"},{emoji:"\uD83D\uDE14",title:"Pensive Face"},{emoji:"\uD83D\uDE2A",title:"Sleepy Face"},{emoji:"\uD83E\uDD24",title:"Drooling Face"},{emoji:"\uD8
|
|||
|
|
<style>
|
|||
|
|
.fg-emoji-container {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: ${a}px;
|
|||
|
|
height: 400px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.62);
|
|||
|
|
background-color: white;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-container svg {
|
|||
|
|
max-width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-category-title {
|
|||
|
|
display: block;
|
|||
|
|
margin: 20px 0 0 0;
|
|||
|
|
padding: 0 10px 5px 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
font-weight: bold;
|
|||
|
|
flex: 0 0 calc(100% - 20px);
|
|||
|
|
border-bottom: 1px solid #ededed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav {
|
|||
|
|
background-color: #646772;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav li a svg {
|
|||
|
|
transition: all .2s ease;
|
|||
|
|
fill: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav li:hover a svg {
|
|||
|
|
fill: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
list-style: none;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
border-bottom: 1px solid #dbdbdb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li a {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 40px;
|
|||
|
|
transition: all .2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li a:hover {
|
|||
|
|
background-color: #e9ebf1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li.active a {
|
|||
|
|
background-color: #e9ebf1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li.emoji-picker-nav-active a {
|
|||
|
|
background-color: #e9ebf1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-nav ul li.emoji-picker-nav-active a svg {
|
|||
|
|
fill: #646772;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-move {
|
|||
|
|
/* pointer-events: none; */
|
|||
|
|
cursor: move;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-picker-special-buttons a {
|
|||
|
|
background-color: ${this.options.specialButtons?this.options.specialButtons:"#ed5e28"};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-picker-special-buttons:last-child a {
|
|||
|
|
box-shadow: inset 1px 0px 0px 0 rgba(0, 0, 0, 0.11);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-list {
|
|||
|
|
list-style: none;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
height: 323px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-category-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-list li {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 0 0 calc(100% / 6);
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-list li a {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
text-decoration: none;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 23px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
transition: all .3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-list li a:hover {
|
|||
|
|
background-color: #ebebeb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-search {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-search input {
|
|||
|
|
border: none;
|
|||
|
|
box-shadow: 0 0 0 0;
|
|||
|
|
outline: none;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
display: block;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
background-color: #f3f3f3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fg-emoji-picker-search .fg-emoji-picker-search-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
`;document.head.insertAdjacentHTML("beforeend",e)},position(){let e=window.event,i=e.clientX,t=e.clientY,o={};return o.left=i,o.top=t,o},rePositioning(e){e.getBoundingClientRect().right>window.screen.availWidth&&(e.style.left=window.screen.availWidth-e.offsetWidth+"px"),window.innerHeight>400&&e.getBoundingClientRect().bottom>window.innerHeight&&(e.style.top=window.innerHeight-e.offsetHeight+"px")},render:(e,l)=>{l||(l=".emojis"),o=void 0;let a=this.options.trigger.findIndex(e=>e.selector===l);this.insertInto=this.options.trigger[a].insertInto;let g=r.position();if(!i.length){for(let s in m)if(m.hasOwnProperty.call(m,s)){let _=m[s];t+=`<li>
|
|||
|
|
<a title="${s}" href="#${s}">${n[s]}</a>
|
|||
|
|
</li>`,i+=`<div class="fg-emoji-picker-category-wrapper" id="${s}">`,i+=`<p class="fg-emoji-picker-category-title">${s}</p>`,_.forEach(e=>{i+=`<li data-title="${e.title.toLowerCase()}">
|
|||
|
|
<a title="${e.title}" href="#">${e.emoji}</a>
|
|||
|
|
</li>`}),i+="</div>"}}document.querySelector(".fg-emoji-container")&&this.lib(".fg-emoji-container").remove();let c=`
|
|||
|
|
<div class="fg-emoji-container" style="left: ${g.left}px; top: ${g.top}px;">
|
|||
|
|
<nav class="fg-emoji-nav">
|
|||
|
|
<ul>
|
|||
|
|
${t}
|
|||
|
|
|
|||
|
|
<li class="fg-picker-special-buttons" id="fg-emoji-picker-move"><a class="fg-emoji-picker-move" href="#">${j.move}</a></li>
|
|||
|
|
${this.options.closeButton?'<li class="fg-picker-special-buttons"><a id="fg-emoji-picker-close-button" href="#">'+j.close+"</a></li>":""}
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div class="fg-emoji-picker-search">
|
|||
|
|
<input type="text" placeholder="Search" autofocus />
|
|||
|
|
|
|||
|
|
<span class="fg-emoji-picker-search-icon">${j.search}</sapn>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<!--<div class="fg-emoji-picker-loader-animation">
|
|||
|
|
<div class="spinner">
|
|||
|
|
<div class="bounce1"></div>
|
|||
|
|
<div class="bounce2"></div>
|
|||
|
|
<div class="bounce3"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>-->
|
|||
|
|
|
|||
|
|
<ul class="fg-emoji-list">
|
|||
|
|
${i}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;document.body.insertAdjacentHTML("beforeend",c),r.rePositioning(document.querySelector(".fg-emoji-container")),setTimeout(()=>{document.querySelector(".fg-emoji-picker-search input").focus()},500)},closePicker:e=>{e.preventDefault(),this.lib(".fg-emoji-container").remove(),l=!1},checkPickerExist(e){!document.querySelector(".fg-emoji-container")||e.target.closest(".fg-emoji-container")||l||r.closePicker.call(this,e)},setCaretPosition(e,i){var t=e;if(null!=t){if(t.createTextRange){var o=t.createTextRange();o.move("character",i),o.select()}else t.selectionStart?(t.focus(),t.setSelectionRange(i,i)):t.focus()}},insert:e=>{e.preventDefault();let i=e.target.innerText.trim(),t=document.querySelectorAll(this.insertInto),o=i;t.forEach(e=>{if(document.selection)e.focus(),(sel=document.selection.createRange()).text=o;else if(e.selectionStart||"0"==e.selectionStart){let i=e.selectionStart,t=e.selectionEnd;e.value=e.value.substring(0,i)+o+e.value.substring(t,e.value.length),r.setCaretPosition(e,i+2)}else e.value+=o,e.focus()})},categoryNav:e=>{e.preventDefault();let i=e.target.closest("a");if(i.getAttribute("id")&&"fg-emoji-picker-close-button"===i.getAttribute("id")||i.className.includes("fg-emoji-picker-move"))return!1;let t=i.getAttribute("href"),o=document.querySelector(".fg-emoji-list"),l=o.querySelector(`${t}`);this.lib(".fg-emoji-nav li").removeClass("emoji-picker-nav-active"),i.closest("li").classList.add("emoji-picker-nav-active"),l.scrollIntoView({behavior:"smooth",block:"start",inline:"nearest"})},search(e){let i=e.target.value.trim();o||(o=Array.from(document.querySelectorAll(".fg-emoji-picker-category-wrapper li"))),o.filter(e=>{e.getAttribute("data-title").match(i)?e.style.display="":e.style.display="none"})},mouseDown(e){e.preventDefault(),l=!0},mouseUp(e){e.preventDefault(),l=!1},mouseMove(e){if(l){e.preventDefault();let i=document.querySelector(".fg-emoji-container");i.style.left=e.clientX-320+"px",i.style.top=e.clientY-10+"px"}}},g=()=>{this.lib(document.body).on("click",r.closePicker,"#fg-emoji-picker-close-button"),this.lib(document.body).on("click",r.checkPickerExist),this.lib(document.body).on("click",r.render,this.trigger),this.lib(document.body).on("click",r.insert,".fg-emoji-list a"),this.lib(document.body).on("click",r.categoryNav,".fg-emoji-nav a"),this.lib(document.body).on("input",r.search,".fg-emoji-picker-search input"),this.lib(document).on("mousedown",r.mouseDown,"#fg-emoji-picker-move"),this.lib(document).on("mouseup",r.mouseUp,"#fg-emoji-picker-move"),this.lib(document).on("mousemove",r.mouseMove)};(()=>{r.styles(),g.call(this)})()};
|