/**
* Image input preview handler
*/
class ImageInputPreview{
constructor(target, parameters){
/**
* Base input
* @type {Element}
*/
this.input = target instanceof Element ? target : document.querySelector(target);
/**
* Has the input changed ?
* @type {Boolean}
*/
this.changed = false;
/**
* Parameters holder
* @private
*/
this._parameters = {
preview: null,
uploadIcon: null,
lang: 'en',
dictionary: null,
...(parameters || {})
};
//Errors checking
if(!this.input){
throw console.warn('ImageInputPreview: '+(typeof target == 'string' ? 'The selector `'+target+'` didn\'t match any element.' : 'The element you provided was undefined'));
}else if(this.input.classList.contains('iip-initialized')){
throw console.warn('ImageInputPreview: The element has already been initialized.');
}else{
/**
* Upload icon
* @private
*/
this._uploadIcon = this._parameters.uploadIcon || 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYwIDYwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNTAuOTc1IDIwLjY5NGMtMC41MjctOS03Ljk0Ni0xNi4xOTQtMTYuODkxLTE2LjE5NC01LjQzIDAtMTAuNjg4IDIuNjYzLTEzLjk0NiA3LjAwOC0wLjA3NC0wLjAzOS0wLjE1My0wLjA2NS0wLjIyOC0wLjEwMi0wLjE5OC0wLjA5Ni0wLjM5OS0wLjE4OC0wLjYwNS0wLjI2OS0wLjExNS0wLjA0NS0wLjIzLTAuMDg2LTAuMzQ2LTAuMTI3LTAuMjAyLTAuMDcxLTAuNDA2LTAuMTMzLTAuNjE1LTAuMTktMC4xMTYtMC4wMzEtMC4yMzEtMC4wNjMtMC4zNDktMC4wOS0wLjIyNC0wLjA1MS0wLjQ1Mi0wLjA5LTAuNjgzLTAuMTI0LTAuMTAyLTAuMDE1LTAuMjAyLTAuMDM1LTAuMzA1LTAuMDQ3LTAuMzMtMC4wMzYtMC42NjYtMC4wNTktMS4wMDctMC4wNTktNC45NjIgMC05IDQuMDM3LTkgOSAwIDAuMTI5IDdlLTMgMC4yNTUgMC4wMTYgMC4zODEtNC4xNTkgMi4yNjctNy4wMTYgNy4wMTgtNy4wMTYgMTEuNzczIDAgNy4wODMgNS43NjIgMTIuODQ2IDEyLjg0NSAxMi44NDZoNS4xNTVjMC41NTIgMCAxLTAuNDQ3IDEtMXMtMC40NDgtMS0xLTFoLTUuMTU1Yy01Ljk4IDAtMTAuODQ1LTQuODY1LTEwLjg0NS0xMC44NDYgMC00LjE1NCAyLjcwNS04LjQ2NiA2LjQzMi0xMC4yNTNsMC41NjgtMC4yNzF2LTAuNjNjMC0wLjEyMyA4ZS0zIC0wLjI0OSAwLjAxNS0wLjM3NWw5ZS0zIC0wLjE3NS0wLjAxMi0wLjE4OGMtNWUtMyAtMC4wODctMC4wMTItMC4xNzQtMC4wMTItMC4yNjIgMC0zLjg1OSAzLjE0LTcgNy03IDAuMzA5IDAgMC42MTQgMC4wMjcgMC45MTcgMC4wNjcgMC4wNzggMC4wMSAwLjE1NSAwLjAyMyAwLjIzMiAwLjAzNiAwLjI2OCAwLjA0NCAwLjUzMiAwLjEwMiAwLjc5MiAwLjE3NyAwLjAzNCAwLjAxIDAuMDY5IDAuMDE2IDAuMTAyIDAuMDI2IDAuMjg2IDAuMDg3IDAuNTY1IDAuMTk4IDAuODM4IDAuMzIyIDAuMDY5IDAuMDMxIDAuMTM3IDAuMDY1IDAuMjA1IDAuMDk5IDAuMjQyIDAuMTE5IDAuNDc5IDAuMjUxIDAuNzA3IDAuMzk5IDEuOTI3IDEuMjQ5IDMuMjA3IDMuNDEzIDMuMjA3IDUuODc0IDAgMC41NTMgMC40NDggMSAxIDFzMS0wLjQ0NyAxLTFjMC0yLjc1NC0xLjI0Ni01LjIxOS0zLjItNi44NzEgMi44NjYtMy43NSA3LjU4OC02LjEyOSAxMi4yODQtNi4xMjkgNy43NDQgMCAxNC4xNzggNi4xMzUgMTQuODQ4IDEzLjg4Ny0xLjAyMi0wLjA3Mi0yLjU1My0wLjEwOS00LjA4MyAwLjEyNS0wLjU0NiAwLjA4My0wLjkyMSAwLjU5My0wLjgzOCAxLjEzOSAwLjA3NSAwLjQ5NSAwLjUwMSAwLjg1IDAuOTg3IDAuODUgMC4wNSAwIDAuMTAxLTRlLTMgMC4xNTItMC4wMTIgMi4yMjQtMC4zMzYgNC41NDMtMC4wMjEgNC42ODQtMmUtMyA0LjY1NiAwLjg4NSA4LjE2NiA1LjE3NCA4LjE2NiA5Ljk4NSAwIDUuNTI5LTQuNDk5IDEwLjAyOC0xMC4wMjggMTAuMDI4aC0zLjk3MmMtMC41NTIgMC0xIDAuNDQ3LTEgMXMwLjQ0OCAxIDEgMWgzLjk3MmM2LjYzMiAwIDEyLjAyOC01LjM5NiAxMi4wMjgtMTIuMDI4IDAtNS40ODktMy44MjctMTAuNDEyLTkuMDI1LTExLjc3OHoiLz48cGF0aCBkPSJtMzEuNzA4IDMwLjc5NGMtMC4wOTItMC4wOTMtMC4yMDMtMC4xNjYtMC4zMjYtMC4yMTctMC4yNDQtMC4xMDEtMC41Mi0wLjEwMS0wLjc2NCAwLTAuMTIzIDAuMDUxLTAuMjMzIDAuMTI0LTAuMzI2IDAuMjE3bC03Ljk5OSA3Ljk5OWMtMC4zOTEgMC4zOTEtMC4zOTEgMS4wMjMgMCAxLjQxNCAwLjE5NSAwLjE5NSAwLjQ1MSAwLjI5MyAwLjcwNyAwLjI5M3MwLjUxMi0wLjA5OCAwLjcwNy0wLjI5M2w2LjI5My02LjI5M3YyMC41ODZjMCAwLjU1MyAwLjQ0OCAxIDEgMXMxLTAuNDQ3IDEtMXYtMjAuNTg2bDYuMjkzIDYuMjkzYzAuMTk1IDAuMTk1IDAuNDUxIDAuMjkzIDAuNzA3IDAuMjkzczAuNTEyLTAuMDk4IDAuNzA3LTAuMjkzYzAuMzkxLTAuMzkxIDAuMzkxLTEuMDIzIDAtMS40MTRsLTcuOTk5LTcuOTk5eiIvPjwvc3ZnPg==';
this._loadDictionary();
this._build();
this._listen();
}
}
/**
* Loads the dictionary
* @private
*/
_loadDictionary(){
/** @private */
this._dictionary = {
...this._parameters.dictionary,
en: {
upload: 'Upload image',
...(this._parameters.dictionary || {}).en
},
fr: {
upload: 'Télécharger une image',
...(this._parameters.dictionary || {}).fr
}
};
}
/**
* Builds the ImageInputPreview module in the DOM
* @private
*/
_build(){
this.input.classList.add('iip-input', 'iip-initialized');
/**
* Input preview
* @type {Element}
*/
this.preview = document.createElement('img');
this.preview.classList.add('iip-preview');
this.preview.src = this._parameters.preview || this._uploadIcon;
this.preview.setAttribute('title', this._dictionary[this._parameters.lang].upload)
this.input.after(this.preview);
/**
* Image title
* @type {Element}
* @private
*/
this._title = document.createElement('span');
this._title.classList.add('iip-title');
this.preview.after(this._title);
}
/**
* Listens to necessary events
* @private
*/
_listen(){
this.preview.addEventListener('click', () => {
this.input.click();
});
this.input.addEventListener('change', () => {
if(this.input.files && this.input.files[0]){
if(this.input.files[0].type.startsWith('image/')){
const reader = new FileReader();
reader.onload = r => {
this.preview.src = r.target.result;
};
reader.readAsDataURL(this.input.files[0]);
}
this._title.innerText = this.input.files[0].name;
this.changed = true;
}
});
}
/**
* Changes the preview image
* @param {String} src The preview URL
* @returns {ImageInputPreview} The current ImageInputPreview
*/
setPreview(src){
this.preview.src = src;
return this;
}
/**
* Changes the preview title
* @param {String} title The preview title
* @returns {ImageInputPreview} The current ImageInputPreview
*/
setTitle(title){
this._title.innerText = title;
return this;
}
/**
* Resets the input and the preview
* @returns {ImageInputPreview} The current ImageInputPreview
*/
reset(){
this.input.value = '';
this.preview.src = this._uploadIcon;
this._title.innerText = '';
this.changed = true;
return this;
}
}
// Initialize inputs the data- way
window.addEventListener('load', () => {
let inputs = document.querySelectorAll('input[type="file"][data-preview]');
inputs.forEach(input => {
new ImageInputPreview(input, {
preview: input.getAttribute('data-preview')
});
});
});