diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index f40fe2ae..3cdbbf2f 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -782,4 +782,13 @@ function IsFullScreen(){ document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; +} + +/** + * Check an emoji code + * + * @param s The emoji code to check + */ +function checkEmojiCode(s) { + return s.match(/^:[a-zA-Z0-9]+:$/) != null } \ No newline at end of file diff --git a/assets/js/components/settings/interface.js b/assets/js/components/settings/interface.js index 62b576e4..9d3223d2 100644 --- a/assets/js/components/settings/interface.js +++ b/assets/js/components/settings/interface.js @@ -158,5 +158,21 @@ ComunicWeb.components.settings.interface = { visibility: visibility }; ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); - } + }, + + /** + * Upload a new custom emoji on the server + * + * @param {FormData} form Associated form + */ + uploadEmoji: async function(form) { + return new Promise((res, err) => { + ComunicWeb.common.api.makeFormDatarequest("settings/upload_custom_emoji", form, true, (data) => { + if(data.error) + err(data.error); + else + res(data) + }) + }) + }, } \ No newline at end of file diff --git a/assets/js/pages/settings/sections/emojis.js b/assets/js/pages/settings/sections/emojis.js index 9da1fa90..d72ade0c 100644 --- a/assets/js/pages/settings/sections/emojis.js +++ b/assets/js/pages/settings/sections/emojis.js @@ -43,7 +43,11 @@ class EmojiesSection { innerHTML: "
" }) - this.RefreshList(emojiesList.querySelector("tbody")) + const refreshFunction = () => this.RefreshList(emojiesList.querySelector("tbody")) + refreshFunction(); + + // Add create form + this.AddUploadForm(target, refreshFunction) } /** @@ -84,4 +88,105 @@ class EmojiesSection { } } + /** + * Add a form to upload new custom emojies + * + * @param {HTMLElment} target The target for the form + * @param cb Callback function to call in case of success + */ + static AddUploadForm(target, cb) { + + //Create a box + const box = createElem2({ + appendTo: target, + type: "div", + class: "box box-primary box-emojis-settings" + }); + + // Create the form + const form = createElem2({ + appendTo: box, + type: "form", + }); + + + //Add box header + const boxHead = createElem2({ + appendTo: form, + type: "div", + class: "box-header", + }); + const boxTitle = createElem2({ + appendTo: boxHead, + type: "h3", + class: "box-title", + innerHTML: "Add a new custom emoji" + }); + + //Create box body + const boxBody = createElem2({ + appendTo: form, + type: "div", + class: "box-body" + }); + + + const shorcutInput = createFormGroup({ + target: boxBody, + label: "Shorcut (starting and ending with a semicolon)", + placeholder: ":myEmoticon:", + type: "text", + name: "shorcut" + }) + + const associatedImage = createFormGroup({ + target: boxBody, + label: "Associated image", + type: "file" + }) + + + // Create box footer + const boxFooter = createElem2({ + appendTo: form, + type: "div", + class: "box-footer" + }) + + const submitButton = createElem2({ + appendTo: boxFooter, + type: "input", + elemType: "submit", + value: "Upload custom emoji", + class: "btn btn-primary" + }) + + + form.addEventListener("submit", async (e) => { + e.preventDefault(); + + try { + const shorcut = shorcutInput.value + if(!checkEmojiCode(shorcut)) { + return notify("Invalid shorcut!", "danger"); + } + + if(associatedImage.files.length != 1) { + return notify("Please specify a file to upload!", "danger") + } + + const fd = new FormData() + fd.append("shorcut", shorcut) + fd.append("image", associatedImage.files[0]) + + await ComunicWeb.components.settings.interface.uploadEmoji(fd) + + cb() + + } catch(e) { + console.error(e); + notify("Could not upload new emoji!", "danger"); + } + }) + } } \ No newline at end of file