First commit

application/elements/input.js

@@ -0,0 +1,501 @@
+
+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();
+
+		}
+
+
+	}
+
+}
+