Can upload custom emoji

assets/js/common/utils.js

@@ -783,3 +783,12 @@ function IsFullScreen(){
 		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
+}

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)
+			})
+		})
+	},
 }

assets/js/pages/settings/sections/emojis.js

@@ -43,7 +43,11 @@ class EmojiesSection {
 			innerHTML: "<tbody />"
 		})
 
-		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");
+			}
+		})
+	}
 }