<commit_before><script>
import Vue from 'vue';
import axios from 'axios';
import emojis from '../utilities/emojis.json';

module.exports = {
	props: ['stickers', 'emojiNamesAllowed'],
	data: function(){
		return {
			stickerUploadPreview: '',
			stickerUploadError: '',
			newStickerName: '',
			newStickerDefaultName: ''
		}
	},
	methods: {

		emitAddSticker(){
			//Error checking
			let file = document.querySelector('.sticker-creation-form input[type="file"]').files[0];

			//If `newStickerName` is empty string, set it to `newStickerDefaultName`
			if(this.newStickerName.length === 0) this.newStickerName = this.newStickerDefaultName;	

			//If it's still an empty string, prompt user to enter a name
			if(this.newStickerName.length === 0){
				this.stickerUploadError = "Enter a name for this sticker.";
				return false;
			}

			if(this.stickers.map(s => s.name).indexOf(this.newStickerName) > -1){
				this.stickerUploadError = "Name already in use by another sticker.";
				return false;
			}
			if(file && file.size > 5 * 1024 * 1024){
				this.stickerUploadError = "File size is too large (5MB Max).";
				return false;
			}
			if(!this.emojiNamesAllowed && emojis.indexOf(this.newStickerName) > -1){
				this.stickerUploadError = "Name already in use by an emoji.";
				return false;
			}

			//de-reference
			file = null;

			//Emit add sticker event
			this.stickerUploadError = '';	
			window.setTimeout(() => {	
				let stickerCreationFormData = new FormData(document.querySelector('.sticker-creation-form'));
				this.$emit('addSticker', stickerCreationFormData);
				this.$parent.close();
			}, 100);
			
		},	

		//Sanitize `name` and set it to vm.newDefaultStickerName
		//(used as sticker name if none provided)
		setDefaultStickerName(name){	
			const max_length = 20;
			if(name.indexOf('.') > -1) name = name.substr(0, name.lastIndexOf('.'));
			name = name.toLowerCase().replace(/[^a-zа-яё0-9]/g, '');
			name = (name.length > max_length) ? name.substr(0, max_length) : name;
			this.newStickerDefaultName = name;
		},

		showStickerPreview(e){
			let file = e.target.files[0];
			if(!file) return false;
			this.setDefaultStickerName(file.name);
			
			let reader = new FileReader();
			reader.readAsDataURL(file);
			reader.addEventListener('load', () => {
				this.stickerUploadPreview = reader.result;
				document.querySelector('.sticker-creation-form input[name="name"]').focus();
				reader = null; //de-reference
			});
		},

		//Show custom error message on invalid stickername (for Safari)
		//stackoverflow.com/q/16867407/#42422152
		checkStickerNameValidity(e){
			e.target.setCustomValidity('');
			e.target.checkValidity();
			e.target.setCustomValidity(e.target.validity.valid ? '' : 'Lowercase letters and numbers only');
		}
	}
}
</script>

<template>
<form class="sticker-creation-form" @submit.prevent="emitAddSticker">
	<h1>Create a Sticker</h1>

	<img v-show="stickerUploadPreview" :src="stickerUploadPreview">

	<div v-show="!stickerUploadPreview" class="upload-area">
		<p>Drag image or click to upload</p>
		<input
			name="sticker"
			type="file"
			placeholder="Image"
			accept="image/png, image/jpeg, image/webp"
			@change="showStickerPreview($event)"
			required
		>	
	</div>	
	<input
		v-model="newStickerName"
		@input="checkStickerNameValidity"
		name="name"
		placeholder="Sticker Name"
		pattern="^:?-?[a-zа-яё0-9]+:?$"	
		maxlength="20"
		autocomplete="off"
		spellcheck="false"
	>
	<p v-if="stickerUploadError.length > 0" class="sticker-upload-error">{{stickerUploadError}}</p>
	<button class="btn">Create</button>
</form>
</template>

<style lang="sass">

	.sticker-creation-form
		display: flex
		flex-direction: column
		align-items: center
		text-align: center<commit_msg>Automatically sanitize new sticker name while typing (website)<commit_after><script>
import Vue from 'vue';
import axios from 'axios';
import emojis from '../utilities/emojis.json';

module.exports = {
	props: ['stickers', 'emojiNamesAllowed'],
	data: function(){
		return {
			stickerUploadPreview: '',
			stickerUploadError: '',
			newStickerName: '',
			newStickerDefaultName: ''
		}
	},
	methods: {

		emitAddSticker(){
			//Error checking
			let file = document.querySelector('.sticker-creation-form input[type="file"]').files[0];

			//If `newStickerName` is empty string, set it to `newStickerDefaultName`
			if(this.newStickerName.length === 0) this.newStickerName = this.newStickerDefaultName;	

			//If it's still an empty string, prompt user to enter a name
			if(this.newStickerName.length === 0){
				this.stickerUploadError = "Enter a name for this sticker.";
				return false;
			}

			if(this.stickers.map(s => s.name).indexOf(this.newStickerName) > -1){
				this.stickerUploadError = "Name already in use by another sticker.";
				return false;
			}
			if(file && file.size > 5 * 1024 * 1024){
				this.stickerUploadError = "File size is too large (5MB Max).";
				return false;
			}
			if(!this.emojiNamesAllowed && emojis.indexOf(this.newStickerName) > -1){
				this.stickerUploadError = "Name already in use by an emoji.";
				return false;
			}

			//de-reference
			file = null;

			//Emit add sticker event
			this.stickerUploadError = '';	
			window.setTimeout(() => {	
				let stickerCreationFormData = new FormData(document.querySelector('.sticker-creation-form'));
				this.$emit('addSticker', stickerCreationFormData);
				this.$parent.close();
			}, 100);
			
		},	

		//Sanitize `name` and set it to vm.newDefaultStickerName
		//(used as sticker name if none provided)
		setDefaultStickerName(name){	
			const max_length = 20;
			if(name.indexOf('.') > -1) name = name.substr(0, name.lastIndexOf('.'));
			name = name.toLowerCase().replace(/[^a-zа-яё0-9]/g, '');
			name = (name.length > max_length) ? name.substr(0, max_length) : name;
			this.newStickerDefaultName = name;
		},

		showStickerPreview(e){
			let file = e.target.files[0];
			if(!file) return false;
			this.setDefaultStickerName(file.name);
			
			let reader = new FileReader();
			reader.readAsDataURL(file);
			reader.addEventListener('load', () => {
				this.stickerUploadPreview = reader.result;
				document.querySelector('.sticker-creation-form input[name="name"]').focus();
				reader = null; //de-reference
			});
		},

		sanitizeStickerName(){
			this.newStickerName = this.newStickerName.toLowerCase().replace(/[^a-zа-яё0-9]/g, '');
		},

		//Show custom error message on invalid stickername (for Safari)
		//stackoverflow.com/q/16867407/#42422152
		/*
		checkStickerNameValidity(e){
			e.target.setCustomValidity('');
			e.target.checkValidity();
			e.target.setCustomValidity(e.target.validity.valid ? '' : 'Lowercase letters and numbers only');
		}
		*/
	}
}
</script>

<template>
<form class="sticker-creation-form" @submit.prevent="emitAddSticker">
	<h1>Create a Sticker</h1>

	<img v-show="stickerUploadPreview" :src="stickerUploadPreview">

	<div v-show="!stickerUploadPreview" class="upload-area">
		<p>Drag image or click to upload</p>
		<input
			name="sticker"
			type="file"
			placeholder="Image"
			accept="image/png, image/jpeg, image/webp"
			@change="showStickerPreview($event)"
			required
		>	
	</div>	
	<input
		v-model="newStickerName"
		@input="sanitizeStickerName"
		name="name"
		placeholder="Sticker Name"
		pattern="^:?-?[a-zа-яё0-9]+:?$"	
		maxlength="20"
		autocomplete="off"
		spellcheck="false"
	>
	<p v-if="stickerUploadError.length > 0" class="sticker-upload-error">{{stickerUploadError}}</p>
	<button class="btn">Create</button>
</form>
</template>

<style lang="sass">

	.sticker-creation-form
		display: flex
		flex-direction: column
		align-items: center
		text-align: center
{'fraction_non_alphanumeric': 0.15611538963581778, 'fraction_numerical': 0.013053126223730583, 'mean_word_length': 3.933676754668384, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7145785', 'n_tokens_mistral': 3024, 'n_tokens_neox': 2609, 'n_words': 525}