Unify/application/elements/input.js

import document 		from '/unify/document.js';

import tools	 		from '/unify/tools.js';


export default class input {

	renderToDOM				= true;

	value 					= "";
	
	disabled				= false;

	customElement 			= document.createElement("input");
	
	inputType				= "text";
	
	layers					= 2;
	
	useCustomElement		= true;

	autocomplete			= "on";

	placeholder				= "";

	outline 				= "none";

	validateType			= "default";

	fontSize				= 16

	border					= "1px solid #ececec";

	layers					= 1;

	propegateEvent			= false;

	width					= "-webkit-fill-available"



	#ifdef MACOS

		width					= "70%";

		#ifdef LIGHT

	


			borderBottom			= "1px solid #dedede"

			background				= "#f7f7f7";


			color					= "black";

			opaqueBackgroundColor	= "#f7f7f7";



			focusBackgroundColor	= "#f7f7f7";

			focusBorderBottom		= "1px solid #dedede";


			blurBackgroundColor		= "#F7FAFC";

			blurBorderBottom		= "1px solid #E5E5E5";


			color					= "#b1b1b1";



		#endif


		#ifdef DARK

			background				= "rgb(255 255 255 / 3%)";

			color					= "white";

			opaqueBackgroundColor	= "rgb(255 255 255 / 3%)";



			focusBackgroundColor	= "rgb(255 255 255 / 3%)";

			focusBorderBottom		= "";


			blurBackgroundColor		= "#fbfbfb";

			blurBorderBottom		= "";


		#endif



		padding					= 12;

		margin					= 6;

		marginRight				= 20;

		height					= "fit-content";

		borderRadius			= 0;

		fontWeight				= "bold";

		fontSize				= 10;

		border					= "1px solid rgba(255,255,255,0.04)";

		padding					= 12;

		fontSize				= "";

		borderRadius			= 6;

		borderBottom			= "none";

		width					= "auto"



		

	#endif
	

	

	#ifdef WINDOWS

		borderBottom			= "2px solid #868686"

		borderRadius			= 6;

		padding					= 12;

		margin					= 12;

		height					= "fit-content"

		#ifdef LIGHT

			background				= "#F7FAFC";

			border					= "1px solid #E5E5E5";

			opaqueBackgroundColor	= "#F7FAFC";


			focusBackgroundColor	= "white";

			focusBorderBottom		= "2px solid #4CC2FF";


			blurBackgroundColor		= "#F7FAFC";

			blurBorderBottom		= "1px solid #E5E5E5";


		#endif


		#ifdef DARK

			background				= "#1d1d1d!important"

			webkitBoxShadow			= "inset 0 0 20px 20px #1c1c1c";

			webkitTextFillColor		= "white";

			color					= "white"

			transition				= "background-color 5000s ease-in-out 0s";


			border					= "1px solid #303030";

			borderBottom			= "2px solid #9A9A9A";

			color					= "WHITE";

			opaqueBackgroundColor	= "#1d1d1d!important";


			focusBackgroundColor	= "#1F1F1F";

			focusBorderBottom		= "2px solid #0067C0";


			blurBackgroundColor		= "#fbfbfb";

			blurBorderBottom		= "1px solid #9A9A9A";

	

		#endif
	

	#endif



	focus() {

		this.borderBottom		= this.focusBorderBottom;

		this.background			= this.focusBackgroundColor;

	}

	blur() {

		this.background			= this.blurBackgroundColor;

		this.borderBottom		= this.blurBorderBottom;

	}

	setup( ) {
		
		var that =  this;

		that._useCustomElement = this.useCustomElement;

		this.__defineSetter__( "useCustomElement", function( value ) { 
		
			that._useCustomElement = value;
			
			that.setupElement();

		});
		
		this.__defineGetter__( "useCustomElement", function( value ){ 
			
			if( typeof that._useCustomElement == "undefined" ) {
			
				that._useCustomElement = false;
	
				
				return false;
				
			} else {
			
				return that._useCustomElement;
				
			}
		});

		this.setupElement();
		
	}
	
	
	// For AutoComplete -> but makes that you cannot overide or it happens again
	change() {
	
		this.value = this.customElement.value;
	
	}

	setupElement() {

		this.customElement.setAttribute( "type", this.inputType );

		this.customElement.setAttribute( "autocomplete", this.autocomplete );

		this.customElement.setAttribute( "placeholder", this.placeholder );
		

		if( this.step ) {

			this.customElement.setAttribute( "step", this.step );
		}
		

		if( this.placeholder && this.customElement ) {

			this.customElement.setAttribute( "placeholder", this.placeholder );

		}

		if( this.width ) {

			if( typeof this.width == "number" ) {

				this.customElement.style.width = this.width + "px"; 

			} else {

				this.customElement.style.width = this.width;

			}

			

		}


		if( this.element ) {
		
			var parentNode = this.element.parentNode;
			
			if( this.useCustomElement ) {


			
				if( this.element.tagName != this.customElement.tagName ) {

					parentNode.replaceChild( this.customElement, this.element );
					
					this.element = this.customElement;
				
				}
			
			} else {
			
				if( this.element.tagName != this.defaultElement.tagName ) {
			
					parentNode.replaceChild( this.defaultElement, this.element );
					
					this.element = this.defaultElement;
				
				}
				
			}
			
			this.updateElementContent();
		
		}

	}



	isValid() {

		if( !this.value ) {

			return false;

		}

		return this.validateString( this.value );

	}

	validateEmail(email) {

		const res = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		
		return res.test(String(email).toLowerCase());

	}

	validateString( value ) {

		var isValid 	= true;

		if( !this.value ) {

			return false;

		}


		switch( this.validateType ) {

			case "default":

				if( this.minLength ) {

					if( value.length < this.minLength ) {

						return false;

					}

				}

			break;

			case "email":

				return this.validateEmail( this.value );

			break;


		}


		return true;

	}



	validateInput() {

		if( this.validateString( this.value ) ) {

			this.removeErrorMessages();

			this.validated		= true;

			console.log("remove errorBlock");


			this.border			= "#28a745";

			this.color			= "#495057";

			this.shadow			= "0px 0px 4px 2px #28a745";

		} else {

			this.validated		= false;

			this.border			= "1px solid #dc3545";

			this.color			= "black";

			this.shadow			= "0px 0px 4px 2px #dc3545";

		}

	}

/*
	focus() {

		this.validateInput();

		this.customElement.focus();
		
	}
*/
	removeErrorMessages() {

		var errorBlocks = document.querySelectorAll(".errorBlock");

		for (var i = 0; i < errorBlocks.length; i++) {

			errorBlocks[i].remove();

		}

	}

	showError( text ) {

		this.removeErrorMessages();

		var errorBlock	= document.createElement("div");


		errorBlock.innerText	= text;

		errorBlock.className	= "errorBlock";

		this.boxElement.appendChild( errorBlock );

	}


	afterLoad() {

		if( this.validate ) {

			//this.validateInput();

		}
		

	}

	async keyup( event ){

		this.value = event.target.value;

		if( this.validate ) {

			this.validateInput();

		}


	}

}