forks/microblog.pub
1
0
Fork 1
mirror of https://git.sr.ht/~tsileo/microblog.pub synced 2024-11-15 03:04:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

Tweak the emoji picker

Browse source
This commit is contained in:
Thomas Sileo 2019-04-10 22:57:20 +02:00
parent c100796c86
commit 4122912c19
1 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
templates/new.html
View file

@ -35,8 +35,16 @@
</div> </div>
</div> </div>
<script> <script>
// The new post textarea
var ta = document.getElementsByTagName("textarea")[0]; var ta = document.getElementsByTagName("textarea")[0];
// Helper for inserting text (emojis) in the textarea
function insertAtCursor (textToInsert) { function insertAtCursor (textToInsert) {
ta.focus();
const isSuccess = document.execCommand("insertText", false, textToInsert);
// Firefox (non-standard method)
if (!isSuccess) {
// Credits to https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html
// get current text of the input // get current text of the input
const value = ta.value; const value = ta.value;
// save selection start and end position // save selection start and end position
@ -46,12 +54,15 @@ function insertAtCursor (textToInsert) {
ta.value = value.slice(0, start) + textToInsert + value.slice(end); ta.value = value.slice(0, start) + textToInsert + value.slice(end);
// update cursor to be at the end of insertion // update cursor to be at the end of insertion
ta.selectionStart = ta.selectionEnd = start + textToInsert.length; ta.selectionStart = ta.selectionEnd = start + textToInsert.length;
}
} }
// Emoji click callback func
var ji = function (ev) { var ji = function (ev) {
insertAtCursor(ev.target.attributes.alt.value); insertAtCursor(ev.target.attributes.alt.value + " ");
ta.focus() ta.focus()
//console.log(document.execCommand('insertText', false /*no UI*/, ev.target.attributes.alt.value)); //console.log(document.execCommand('insertText', false /*no UI*/, ev.target.attributes.alt.value));
} }
// Enable the click for each emojis
var items = document.getElementsByClassName("ji") var items = document.getElementsByClassName("ji")
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', ji); items[i].addEventListener('click', ji);